CSS清除浮动

块级元素在页面中独占一行，自上而下排列。但很多时候因为布局需要，我们需要在一行显示多个块级元素，这时我们就需要用到浮动，即float属性。使用float属性可以实现我们的需要的页面布局，但也会带来一些问题。浮动回事元素脱离文档流，会使父级元素高度无法撑开，与浮动元素同级的非浮动块级元素会被遮盖

<style>
        .box{
            width: 300px;
            border: 2px solid red;
        }
        .left{
            width: 100px;
            height: 100px;
            background: darkseagreen;
            float: left
        }
        .right{
            width: 100px;
            height: 200px;
            background: dodgerblue;
            float:right
        }
    </style>

<div class="box">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

浮动带来的问题.png

浮动带来的问题2.png

为了解决浮动带来的问题，我们需要清除浮动，清除浮动的方法有以下几种：

1.给父级元素设置相对应的高度

<style>
        .box{
            width: 300px;
            height:200px;  /*给父级设置相应的高度*/
            border: 2px solid red;
        }
        .left{
            width: 100px;
            height: 100px;
            background: darkseagreen;
            float: left
        }
        .right{
            width: 100px;
            height: 200px;
            background: dodgerblue;
            float:right
        }
    </style>

<div class="box">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

2.为父元素添加overflow:hidden/auto

<style>
        .box{
            width: 300px;
            border: 2px solid red;
            overflow: hidden;  /*给父级元素添加overflow: hidden或者oveflow: auto属性*/
        }
        .left{
            width: 100px;
            height: 100px;
            background: darkseagreen;
            float: left
        }
        .right{
            width: 100px;
            height: 200px;
            background: dodgerblue;
            float: right;
        }
    </style>

<div class="box">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

3.在父元素结束标签之前插入清除浮动的块级元素

<style>
        .box{
            width: 300px;
            border: 2px solid red;
            overflow: hidden;  /*给父级元素添加overflow: hidden或者oveflow: auto属性*/
        }
        .left{
            width: 100px;
            height: 100px;
            background: darkseagreen;
            float: left
        }
        .right{
            width: 100px;
            height: 200px;
            background: dodgerblue;
            float: right;
        }
        .more{
            clear:both;
        }
    </style>

<div class="box">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="more"></div>
</div>

4.利用伪元素清除浮动

该样式在父元素的最后添加一个:after伪元素，通过清除伪元素浮动来撑起父元素的高度

<style>
        .box{
            width: 300px;
            border: 2px solid red;
            overflow: hidden;  /*给父级元素添加overflow: hidden或者oveflow: auto属性*/
        }
        .left{
            width: 100px;
            height: 100px;
            background: darkseagreen;
            float: left
        }
        .right{
            width: 100px;
            height: 200px;
            background: dodgerblue;
            float: right;
        }
        .clearfix:after{
            content: "";
            height: 0;
            clear: both;
            display: block;
        }
    </style>

<div class="box clearfix">
    <div class="left">left</div>
    <div class="right">right</div>
</div>