css浮动会有什么影响,[css]浮动造成的影响

浮动造成的影响: 子元素浮动,父元素无法被撑出高了.

如果要给父元素做通栏background?

如果两个box的子元素都浮动,且希望两个box分行显示?

box1 box2 box3: float:left, 则box自己的高度就没办法被撑开了

现实案例: 需要给父盒子做通栏背景图

现子元素浮动,父元素没高度了,没法加了.

现实案例: 盒子需要分两排显示

子元素浮动,2个父元素都没高度,所以连个父元素的子元素都并排显示了, 没办法分行显示

*{

margin: 0;

padding: 0;

}

ul{

list-style: none;

}

li{

float: left;

width: 100px;

text-align: center;

background: yellowgreen;

}

• HTML
• CSS
• JS

• 学习方法
• 英语水平
• 面试技巧

按理说2个box,分行显示没问题,但此时这两个box的子box发生了浮动, 发生浮动的子元素无法撑开父box, 导致两个父box的内容并排显示了.

给box2设置10px的border如图

现实案例: 底部元素跑到上面去了