首页 > 其他 > 详细

清除浮动的三种方法

时间:2019-08-19 11:47:50      阅读:100      评论:0      收藏:0      [点我收藏+]

在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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!