浮动，的初始初衷不是用来布局页面的，而是用来实现像报纸上图片围绕文字的这种排版效果的……但是，在实际开发中还是经常把浮动用来布局页面

一、浮动布局的使用场景

主要用于在水平方向上实现元素的左对齐或右对齐的方式水平排列。当一个元素设置为浮动后，其后面的兄弟元素会受到影响。因为，浮动元素本身此时已经变为块元素，并且脱离文档流。所以，此时不管是块元素还是行内元素，都可以设置width和height等属性。由于浮动元素脱离了文档流，其后面的兄弟元素环绕着它，它就像飘浮在上面一层一样。

二、浮动的影响

1. 对自身元素的影响：一切浮动元素都是脱离了文档流的块元素，可以设置元素的width和height属性
2. 对兄弟元素的影响：浮动元素只会影响后面的兄弟元素，浮动元素脱离文档流后，后面的兄弟元素会占据浮动元素所在行的空间从而围绕着浮动元素
3. 对父元素的影响：如果父元素高度不够或没有设置高度，则浮动元素会“逃离”到父元素外面造成父元素塌陷，也就是“老子管不住儿子了”

   三、清除浮动的三种方式

4. clear:both：这种方式的缺点是会破坏HTML结构
5. overflow:hidden：有个弊端就是，当内容超出的时候会被隐藏
6. ::after伪元素：这是推荐的方式

   .clearfix{*zoom:1; }
   .clearfix::after
   {
    clear:both;
    content:"";
    display:block;
    height:0;
    visibility:hidden;
   }