如何让个父级元素包住两个左右浮动的子元素？
html代码：
<div class=parent>
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
CSS代码：
<style>
.parent{
width:300px;
height:300px;
border:2px solid red;
position:relative;
top:50px;
left:150px;
}
.parent > .child1{
width:80px;
height:100px;
border:1px solid green;
float:left;
}
.parent > .child2{
width:80px;
height:100px;
border:1px solid blue;
float:right;
}
.parent:after{
content:"这是一个伪元素";
display:block;
background:red;
clear:both;
}
</style>
效果如图：
float
接下来只要把.parent:after元素边框和高度都去掉就可以了，这样的话child1和child2在父级元素里左右浮动，而中间不会有其它的东西了。这是用float布局的常见套路。
float相关注意点
- clear:left; 我的左边不能有浮动元素；
- clear:right; 我的右边不能有浮动元素；
- clear:both; 我的两边不能有浮动元素；
- 父级元素的高度是由处于常规流中元素的高度决定的。
- after/before插入的内容依然是在父级元素里，只是在父级元素内容的前后而已。
