前端html——浮动元素撑开父级元素

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；清除浮动