CSS 浮动和清除浮动

最新推荐文章于 2020-07-25 22:59:29 发布

奥兰治的威廉

最新推荐文章于 2020-07-25 22:59:29 发布

阅读量91

点赞数

分类专栏： frond end

本文链接：https://blog.csdn.net/q503385724/article/details/102991234

版权

frond end 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

https://www.jianshu.com/p/09bd5873bed4

浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素

清除浮动的三种方法

<div class="box-wrapper">
    <div class="box"></div> // 浮动元素
    <div class="box"></div> // 浮动元素
    <div class="box"></div> // 浮动元素
    <div style="clear:both;"></div>
</div>

<div class="box-wrapper clearfix">
    <div class="box"></div> // 浮动元素
    <div class="box"></div> // 浮动元素
    <div class="box"></div> // 浮动元素

</div>

// 现代浏览器clearfix方案，不支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}

// 全浏览器通用的clearfix方案
// 引入了zoom以支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}
.clearfix{
    *zoom: 1;
}

// 全浏览器通用的clearfix方案【推荐】
// 引入了zoom以支持IE6/7
// 同时加入:before以解决现代浏览器上边距折叠的问题
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}