float的几个特性
1,元素一旦浮动就会脱离文档流
2,要么遇到左边框停止,要么遇到右边框停止 float:left float:right
3,沿着水平方向平移
4,当宽度不够,会自动换行
5,浮动元素仅仅影响到后面的元素,对前面的元素无影响
6,行内元素浮动以后支持宽和高设置
clear: left; /清除左边的浮动/
clear: right; /清除右边的浮动/
clear: both; //清除所有的浮动效果
display: block; //行内元素转化为快元素/
- 子元素浮动引起的父级容器的高度塌陷的解决方案
/四种解决方案/
/1,给父级容器设置高度 不合适/
/2,给父级容器添加溢出隐藏属性 overflow 属性 （推荐,可能IE不兼容） /
/3,添加伪类解决 强烈推荐/
/4,直接加入div进行两边浮动,不推荐,代码冗余/
` .box1{
border: 5px dashed red;
/width: 250px;/
/height: 500px;/
/overflow: hidden;/
}
.box1:after{
content: ‘’;
/默认添加的元素是行内元素/
display: block; / //转化为快元素*/
clear: both;
}
.box2{
width: 100%;
height: 400px;
background-color: lightgreen;
float: left;
}`
<div class="box1">
<div class="box2">
</div>
<!--<div style="clear: both">-->
<!--<!–清楚两边浮动强烈不推荐–>-->
<!--</div>-->
</div>