揭开浮动布局的秘密

1，浮动（float）

float属性有4个可选属性，none,left,right,inherit

none为默认值，即不可浮动。

inherit表示继承父元素的float值。

（1）对于块级元素来说，在不设长度的时候，默认的宽度是100%，一旦设置浮动，宽度就会根据内容进行自动调整。如图：

设置浮动

没有设置浮动

（2）设置浮动，不仅会在Y轴进行浮动，而且在Z轴也会浮动，譬如，将子模块设置浮动后，父元素的高度也会变成0

（3）虽然浮动脱离了文档流，但是里面的内容仍然占据着空间，看看下边的例子，跟我们想的是不是不一样。normal没有被float覆盖

例子代码

显示结果

2，清除浮动

（1）clear 可选 left,right,both

         定义了元素的哪一侧不能出现浮动

（2）对父类使用：after伪类

       .clearfix :after{

         display:block;

          clear:both;

         }