清除浮动的三种方法

在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;

  }

posted @ 2019-08-19 10:09  jeff_zhu  阅读(6763)  评论(0编辑  收藏  举报