css清除浮动影响
2017-08-04 本文已影响82人
Pretty_Boy
初始代码环境如下：
<style>
.parent{
width: 300px;
border: 1px solid black;
}
.child1{
height: 100px;
width: 100px;
border: 1px solid red;
float: left;
}
.child2{
height: 100px;
width: 100px;
border: 1px solid yellow;
float: right;
}
</style>
<body>
<div class="parent">
<div class="child1">1</div>
<div class="child2">2</div>
</div>
</body>
image.png
方法1：（并算不上清除浮动）
在父元素中计算并设定子元素所占高度
即
.parent{
width: 300px;
height: 100px;
border: 1px solid black;
}
微信截图_20170804155539.png
方法2：
利用添加子元素clear:both设定
.clear{
clear:both;
}
<div class="child2">2</div>
<div class="clear"></div>
微信截图_20170804155819.png
方法3：
利用父元素中overflow:hidden
.parent{
width: 300px;
overflow: hidden;
border: 1px solid black;
}
微信截图_20170804160122.png
方法4：（与方法2思想一致）
利用伪类选择器构造一个型为div
.parent:after{
display: block;
content:"";
clear: both;
}
微信截图_20170804160821.png
