1.页面内容
<div id="one"></div>
<div id="two"></div>
2.页面样式
*{
padding: 0;
margin: 0;
}
#one{
width: 1000px;
border: 5px solid black;
}
#two{
width: 1000px;
height: 200px;
background-color: peachpuff;
}
上面div因没有内容无法被撑开
3.添加内容
#one div{
width: 230px;
height: 260px;
margin: 10px;
background-color: blue;
}
div被内容撑开
添加float:left;后:
- 第一个id=one的div内没有内容,并未被撑开
- 第二个id=two的div被叠在下面
如果父级元素的子元素都是浮动元素,那么子元素无法撑开父级元素
4.解决方法
给父级元素加上float:hidden;清除浮动