H5-28 清除浮动

标签：浮动 color 28 元素 100px H5 width background height

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

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;         }  

 

 

 

 

标签：浮动,color,28,元素,100px,H5,width,background,height
From： https://www.cnblogs.com/zhangxiaoguo/p/18587046