清除浮动的三种方法

在css中 clear 属性用于清除元素左右两侧浮动，常用属性值有 left (不允许左侧有浮动元素）right (不允许右侧有浮动元素）both (同时清除左右两侧浮动的影响)

注意: clear属性只能清除元素左右两侧浮动影响，但是在网页制作经常会遇到一些特殊的浮动影响。例如对子元素设置浮动时，如果不对其父元素定义高度，则子元素的浮动会对父元素产生影响(高度塌陷）

01，使用空标记清除浮动

　　在浮动元素之后添加空标记，并对空标记应用 " clear:both "样式，可清除元素浮动产生影响。空标记可以为 div,p,<hr/>等任何标记。

02，使用 overflow 属性清除浮动

　　对元素应用 " overflow : hidden " 样式也可以清除浮动对该元素影响。该方法弥补空标记清除浮动的不足。

03，使用after伪对象清除浮动

　　必须为需要清除浮动的元素伪对象设置 "height:0",否则该元素会比其实际高度高出若干像素。

　　必须在伪对象中设置content属性，属性值可以为空，如" content:"" "。

　　.father:after{

　　　　display:block;

　　　　clear:both;

　　　　content: "";

　　　　visibility:hidden;

　　　　height:0;

　　}

转载于:https://www.cnblogs.com/jeff-zhu/p/11375502.html