浮动元素的问题

Dear 丶 2021-09-19 07:08 300阅读 0赞

**题目：**  
![在这里插入图片描述][20190506155058207.]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1a2lmYW4_size_16_color_FFFFFF_t_70]

一、在浮动元素外面再嵌套一层div（适用float：left或者position：relative）：  
![在这里插入图片描述][20190506155333765.]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1a2lmYW4_size_16_color_FFFFFF_t_70 1]

二、浮动元素水平居中-----宽度不固定的浮动元素（适用于float：left和position：relative）：  
![在这里插入图片描述][2019050615550729.]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1a2lmYW4_size_16_color_FFFFFF_t_70 2]

三、浮动元素水平居中-----宽度固定的互动元素（适用于position的任何情况和float：left）：  
![在这里插入图片描述][20190506161230882.]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1a2lmYW4_size_16_color_FFFFFF_t_70 3]

四、写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块，请写出结构及样式：  
http://www.cnblogs.com/hhsy/p/5777534.html

五、解决浮动元素最有效的方式：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1a2lmYW4_size_16_color_FFFFFF_t_70 4]

[20190506155058207.]: https://img-blog.csdnimg.cn/20190506155058207.
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1a2lmYW4_size_16_color_FFFFFF_t_70]: /images/20210812/729fb66466e4480a8b30ad0d9e6e99ff.png
[20190506155333765.]: /images/20210812/7bfaea431859428ea66f4514a3be7baa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1a2lmYW4_size_16_color_FFFFFF_t_70 1]: /images/20210812/640a8e1ad7bd47b4b878dbec2ff39c28.png
[2019050615550729.]: /images/20210812/920071abfd4645c0890ea7ff68b2eb60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1a2lmYW4_size_16_color_FFFFFF_t_70 2]: /images/20210812/6435d98f1a0c48bd99b1ce38a009ef81.png
[20190506161230882.]: /images/20210812/8c0b0ef1693241f3b401e985b19a49a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1a2lmYW4_size_16_color_FFFFFF_t_70 3]: /images/20210812/79c41922c58e4609bb08a3b01ef1d80a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1a2lmYW4_size_16_color_FFFFFF_t_70 4]: /images/20210812/480f1b0999894082ba290a22bca08ae6.png