乐鱼电竞

  • 教育行业A股IPO第一股（股票代码 003032）

    全国咨询/投诉热线：400-618-4000

    CSS如何清除浮动？清除浮动的方法有哪些？

    更新时间:2021年09月29日17时40分 来源:乐鱼电竞 浏览次数:

    好口碑IT培训

    清除浮动的方法有哪些？有额外标签法(隔墙法)、父级添加overflow属性方法、父级添加overflow属性方法、使用after伪元素清除浮动和使用双伪元素清除浮动四种方法。


    1.额外标签法(隔墙法)

    额外标签法是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如<div style=”clear:both”></div>，或则其他标签br等亦可。

    优点： 通俗易懂，书写方便

    缺点： 添加许多无意义的标签，结构化较差。


    2.父级添加overflow属性方法

    可以给父级添加： overflow属性为 hidden| auto| scroll 都可以实现，常用： overflow: hidden;

    优点：代码简洁

    缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。


    3.使用after伪元素清除浮动

    :after方式为空元素额外标签法的升级版，好处是不用单独加标签了,使用方法：

    .clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden; 
}   
.clearfix {
	*zoom: 1;
}   /* IE6、7 专有 */

    优点： 符合闭合浮动思想,结构语义化正确。

    缺点： 由于IE6-7不支持:after，使用zoom:1触发hasLayout。


    4.使用双伪元素清除浮动

    .clearfix:before,
.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 	clear:both;
}
.clearfix {
	*zoom:1;
}

    优点： 结构语义化正确

    缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。



    猜你喜欢：

    CSS3相比CSS有哪些优势？

    CSS3中怎样将box-sizing设为content-box？

    CSS3 box-shadow的用法|box-shadow属性详解

    C3和h5新增特性有哪些?

    乐鱼电竞HTML&JS+前端高手班

    0 分享到：
    和我们在线交谈！
    【网站地图】【sitemap】