CSS3浮动与清除浮动

最新推荐文章于 2022-10-10 09:41:17 发布

粥要熬

最新推荐文章于 2022-10-10 09:41:17 发布

阅读量547

点赞数 1

分类专栏： CSS3 文章标签：文档设计 css3

本文链接：https://blog.csdn.net/qq_36009964/article/details/76914312

版权

CSS3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

浮动的设计初衷：实现文字环绕效果。
浮动的特征：脱离标准文档流，导致父元素高度塌陷，向左或者向右浮动直到遇到其他的浮动元素。
浮动产生的原因：盒子里的子元素使用了浮动属性，脱离了文档流，导致父元素无法被撑开。
浮动造成的副作用：父级的背景无法显示，父级的边框无法被撑开，以及父级与子级之间的margin和padding遭到破坏。
清除浮动的方法：
方法一：在底部插入“clear:both”声明的元素。
原理：在底层元素添加clear属性来清除浮动，是因为clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素，即清除所有浮动。
方案1：HTML层面，在浮动元素后面使用一个空元素，如<div...></div> 缺点：裸露太多的div标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style type="text/css">
        .div_first{
            width: 300px;
            border:2px solid red;
        }
        .div_second{
            width: 100px;
            height:100px;
            background: #2A2626;
            float:left;
        }
        .div_third{
            width: 200px;
            height: 200px;
            background: #12ED31;
            float: left;
        }
        .div_fourth{
            clear:both;
        }
    </style>
</head>
<body>
     <div class="div_first">
        <div class="div_second"></div>
        <div class="div_third"></div>
        <div class="div_fourth"></div>
     </div>
</body>
</html>

方案二：CSS层面，使用after伪元素,推荐使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style type="text/css">
        .div_first{
            width: 300px;
            border:2px solid red;
        }
        .div_second{
            width: 100px;
            height:100px;
            background: #2A2626;
            float:left;
        }
        .div_third{
            width: 200px;
            height: 200px;
            background: #12ED31;
            float: left;
        }
        .clearfix:after{
            clear:both;
            height:0;
            content:"";
            overflow:hidden;
            display:block;
        }
        .clearfix{
            *zoom:1;/*兼容ie6,ie7*/
        }
    </style>
</head>
<body>
     <div class="div_first clearfix">
        <div class="div_second"></div>
        <div class="div_third"></div>
     </div>
</body>
</html>

其中clearfix可以精简为：

.clearfix:after{
    clear:both;
    content:"";
    display:table;
}

方法二：让父元素BFC（IE8+）或者haslayout(IE6/IE7)
BFC:块状格式化上下文，特征：BFC容器是一个隔离的容器，和其他元素互不干扰；我们可以用触发两个元素的BFC来解决垂直边距折叠问。BFC可以包含浮动，清除浮动；通常用来解决浮动父元素高度坍塌的问题。
给父元素添加以下属性来触发BFC：

float：left/right
position:absolute/fixed
overflow:hidden/scroll(IE7+)
display:inline-block/table-cell(IE8+)
width/height/zoom:1/……

例如给父级元素设置overflow:hidden来清除浮动

.div_first{
    width: 300px;
    border:2px solid red;
    overflow:hidden;
}

总结：通常使用after伪元素作为清除浮动主要方式。.clearfix只应用在浮动元素的父级元素上。
浮动的注意点：脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用position:absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。