H5-28 清除浮动

浮动元素会造成父元素高度塌陷后续元素也会受到影响

1、浮动的作用

　　当元素设置fliat浮动后，该元素就会脱离文档流并向左/向右浮动

　　①浮动元素会造成父元素高度塌陷

　　②后续元素会受到影响

   <div class="box">

        <div class="a"></div>

        <div class="a"></div>

        <div class="a"></div>

        <div class="b"></div>

    </div>

        <div class="b"></div>

 

        .box{

            width: 500px;

           

            background-color: #888;

        }

        .a{

            width: 100px;

            height: 100px;

            background-color: aqua;

            margin: 5px;

            float: left;

        }

        .b{

            width: 100px;

            height: 100px;

            background-color: blueviolet;

        }

2、清楚浮动

　　当父元素出现塌陷的时候，对布局是不利的，所以我们必须清除副作用

　　解决方案有很多种

　　①父元素设置高度

　　②受影响的元素增加clear属性

　　③overflow清除浮动

　　④伪对象方式

3、父元素设置高度

　　如果父元素高度塌陷，可以给父元素设置高度，撑开元素本身大小

　　

    <div class="box">

        <div class="a"></div>

        <div class="a"></div>

        <div class="a"></div>

        <div class="b"></div>

    </div>

.box{

            width: 500px;

            height:500px;

            background-color: #888;

        }

        .a{

            width: 100px;

            height: 100px;

            background-color: aqua;

            margin: 5px;

            float: left;

        }

        .b{

            width: 100px;

            height: 100px;

            background-color: blueviolet;

            clear: both;

        }

 4、overflow清除浮动

　　如果有父级塌陷，并且同级元素也受到了影响，可以使用overflow清除浮动

　　这种情况下，父布局不能设置高度

　　父级标签的样式里面加：overflow: hidden; clear: both;

　　

    <div class="box">

        <div class="a"></div>

        <div class="a"></div>

        <div class="a"></div>

        <div class="b"></div>

    </div>

        <div class="b"></div>

 

        .box{

            width: 500px;

            height:500px;

            background-color: #888;

            overflow: hidden;

            clear: both;

        }

        .a{

            width: 100px;

            height: 100px;

            background-color: aqua;

            margin: 5px;

            float: left;

        }

        .b{

            width: 100px;

            height: 100px;

            background-color: blueviolet;

            clear: both;

        }

5、伪对象方式

　　如果有父级塌陷，并且同级元素也受到了影响，还可以使用伪对象方式处理

　　为父级标签添加伪类after，设置空的内容，并使用clear:both

　　这种情况下，父布局不能设置高度

 <div class="box">

        <div class="a"></div>

        <div class="a"></div>

        <div class="a"></div>

        <div class="b"></div>

    </div>

        <div class="b"></div>

 

 .box{

            width: 500px;

            height:500px;

            background-color: #888;

            overflow: hidden;

            clear: both;

        }

        .box::after{

            content: "";

            display: block;

            clear:both;

           

        }

        .a{

            width: 100px;

            height: 100px;

            background-color: aqua;

            margin: 5px;

            float: left;

        }

        .b{

            width: 100px;

            height: 100px;

            background-color: blueviolet;

            clear: both;

        }