<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
.txt{
height:100px;
background: pink;
}
.box{
width:800px;
border:10px solid red;
/*height:180px;*/
/*overflow:hidden;*/
position:relative;
}
.box1{
width: 100px;
height: 100px;
background: skyblue;
float:left;
position:absolute;
right:-20px;
top:0px;
}
.box2{
width: 200px;
height: 150px;
background: gold;
float:left;
}
.box3{
width: 300px;
height: 180px;
background: orange;
float:left;
}
.box4{
height:0;
width:0;
clear:left;/*清除浮动 清除浮动带来的问题*/
}
.box:after{
content:".";
display:block;
width:0;
height:0;
clear:both;/*清除浮动带来的问题 */
overflow:hidden;
visibility:hidden;
}
</style>
</head>
<body>
<!--
问题:
父级元素不给高度,子元素浮动,会造成父元素高度塌陷
解决办法:
1: 给父元素添加高度
缺点: 不灵活
2: 给父级元素添加overfow:hidden;(触发了一个bfc区域)
缺点: 定位出去的元素将会被隐藏
3: 给浮动元素的 最后 面添加一个空标签(块级元素)
空标签的样式:
width: 0;
height: 0;
clear: left/right/both; 左/右/都干掉
缺点: 代码冗余
4: 万能清除法
.name:after{
content:"";
display:block;
width:0;
height:0;
clear:both/left/right;
overflow:hidden;
visibility:hidden;
}
-->
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<!--<p class="box4"></p>-->
</div>
<div class="txt"></div>
</body>
</html>
