css清除浮动

CSS清除浮动的几种方法

问题是怎么产生的

由代码和图可见，父盒子并没有设置高度，他的的高度是由子盒子撑出来的。
 #father{
            background-color: #ccc;
            width: 500px;
            text-align: center;
        }
        #son1{
            background: pink;
            width: 100px;
            height: 100px;
        }
        #son2{
            background-color: blue;
            width: 100px;
            height: 100px;
        }
    <div id="father">
        <div id="son1">1</div>
        <div id="son2">2</div>
    </div>

当我们为两个子盒子1和2设置浮动时，左浮或者右浮，就会出现如图的问题（父盒子塌陷）。
        #son1{
            background: pink;
            width: 100px;
            height: 100px;
            float: left;
        }
        #son2{
            background-color: blue;
            width: 100px;
            height: 100px;
            float: left;
        }

此时就要清除浮动

方法1（添加额外添加空标签清除浮动，浪费资源）

<style>
        #father{
            background-color: #ccc;
            width: 500px;
            text-align: center;
        }
        #son1{
            background: pink;
            width: 100px;
            height: 100px;
            float: left;
        }
        #son2{
            background-color: blue;
            width: 100px;
            height: 100px;
            float: left;
        }
        #extra{
            clear: both;
            /* clear: left; 清除左浮*/
            /* clear: right; 清除右浮*/
            /* both 左右都有用 */
        }
    </style>
  <body>
    <div id="father">
        <div id="son1">1</div>
        <div id="son2">2</div>
        <div id="extra">我是额外添加的空标签来清除浮动的</div>
    </div>
  </body>

方法2 （触动bfc清除浮动，会遮挡内容）

在父元素添加

overflow: hidden;

完整代码

<style>
        #father{
            background-color: #ccc;
            width: 500px;
            text-align: center;
            overflow: hidden;
        }
        #son1{
            background: pink;
            width: 100px;
            height: 100px;
            float: left;
        }
        #son2{
            background-color: blue;
            width: 100px;
            height: 100px;
            float: left;
        }

    </style>
    <body>
    <div id="father">
        <div id="son1">1</div>
        <div id="son2">2</div>
    </div>
    </body>

方法3 （利用伪元素，推荐使用）

在父元素添加一个类

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

完整代码

        #father{
            background-color: #ccc;
            width: 500px;
            text-align: center;
        }
        #son1{
            background: pink;
            width: 100px;
            height: 100px;
            float: left;
        }
        #son2{
            background-color: blue;
            width: 100px;
            height: 100px;
            float: left;
        }
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
    <body>
    <div id="father" class="clearfix">
        <div id="son1">1</div>
        <div id="son2">2</div>
    </div>
    </body>
posted @ 2021-03-31 23:33  两年半coder练习生  阅读(52)  评论(0)    收藏  举报