CSS clear清除浮动

    





    
1

    
2

        
2.1

        
2.2

    

    
3

    
clear 是为了当前元素不受之前兄弟元素本身(同一个父元素，不包含其子元素等)的浮动的影响

image

父级边框塌陷的问题
clear：
right：右侧不允许有浮动元素；
left：左侧不允许有浮动元素；
both：两侧不允许有浮动元素；
none：
解决塌陷问题方案：

方案一：增加父级元素的高度；

father{

border:1px #000 solid;
height:800px;

}
方案二：增加一个空的 div 标签，清除浮动。

方案三：在 父级元素中 增加一个 overflow 属性。
overflow:hidden; /* 隐藏超出部分 /
overflow:scroll; / 滚动 */
方案四（推荐）：父类 添加一个伪类:after。

father:after{

content:'';
display:block;
clear:both;

}