对兄弟元素的影响：对前面的兄弟无影响。
后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面，下面元素的文字会被挤出来呈现文字环绕的效果
对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元
素。
<style>
.box{
width: 40px;
height: 40px;
background-color: antiquewhite;
margin-bottom: 5px;
float:left;
}
.outer1>div{
background-color: aquamarine;
width: 50px;
height: 50px;
}
</style>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
<div class="outer1">
<div class=" ">1</div>
<div class=" ">2</div>
<div class=" ">3</div>
</div>
</body>
解决：
1 给父元素增加高度
2 给父元素设置浮动。高就出来了。会带来其他影响。
3 父元素 overflow:hidden
4 所有浮动元素的最后面增加clear:both;
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="clear"></div>
</div>
5 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。===> 推
荐使用
布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。
扫一扫
2401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
