通俗易懂~浮动布局，解释浮动布局带来的影响，及如何清除浮动

正常文档流和脱离文档流概念：

正常文档流：将页面从上到下分为一行一行，其中块元素当都占据一行，相邻的行内元素则按照从左到右排列，直到排满布局。

脱离文档流：改变原先HTML文档结构，有两种办法1.浮动，2.定位

 

浮动可以使得元素移到左边或右边，并且后面的文字或元素环绕它。

常用于实现：水平方向上的并排布局，如两列布局、多列布局。

 

float属性：left、right、none

浮动特点：

特点1：会将元素转成block类型

特点2：脱离文档流、后面的元素会紧跟填上空缺的位置

 

浮动影响 ---- 自身、父元素、兄弟元素、子元素

· 自身：变成block元素

· 对父元素：

　　若 浮动元素height 大于父元素height 或者 父元素没有定义高度hight，则浮动元素将会脱离文档流，导致 “父元素高度坍缩” ，老爸管不住儿子，儿子离家出走了

· 对子元素：

　　父元素作为浮动元素，可以自适应地包含子元素

· 对兄弟元素：

　　兄弟是浮动元素：

　　　　同一方向的浮动元素：元素从左到右、从上到下，一个接着一个紧挨着。

　　　　方向相反的浮动元素：兄弟两移向两边（父元素宽度足够时）

　　兄弟不是浮动元素：↓

浮动所带来的副作用

1.父元素高度坍缩，从而导致边框不能撑开，背景色无法显示。

2.页面布局混乱

 

清除浮动方法

1.overflow：hidden

应用于父元素，而不是当前浮动的元素

缺点：会将子元素超出父元素的部分切割掉。

2.clear：both

不是应用于浮动元素本身，而是应用于浮动元素的后面的元素<div class="clear"></div>

缺点：需要额外多余地添加一个标签。

3.::after伪元素（效果最好）

.clearfix{*zoom:1;}     /*解决Ie6,7的浮动问题*/
.clearfix::after{       /*在真正页面元素内容内部之后添加新内容*/
    clear:both;
    content:"";
    display: block;
    height:0;
    visibility: hidden; /*设置对象隐藏*/
}

将clear应用于父元素中，可以清除该元素内的浮动元素带来的浮动影响