1.额外标签法(隔墙法)
2.父级overflow:hidden;
3.父级after伪元素
4.父级双伪元素
清除浮动后加外边框会撑大盒子
额外标签法
位于浮动下面的盒子添加clear:both/left/right;清除浮动
添加clear:both;前
<style>
.box {
background: gray;
}
.a {
height: 100px;
width: 100px;
background: pink;
float: left;
border: blue 2px solid; /* 边框 */
}
.b {
height: 200px;
width: 100px;
background: skyblue; border: red;
/* clear: both; 清除浮动 */
border: solid 5px black;
}
</style>
</head>
<body>
<div class="box">
<div class="a"></div>
<div class="b"></div>
</div>
添加clear:both;后
<style>
.box {
background: gray;
}
.a {
height: 100px;
width: 100px;
background: pink;
float: left;
border: blue 2px solid; /* 边框 */
}
.b {
height: 200px;
width: 100px;
background: skyblue; border: red;
clear: both; /*清除浮动*/
border: solid 5px black;
}
</style>
</head>
<body>
<div class="box">
<div class="a"></div>
<div class="b"></div>
</div>
</body>
2.父级overflow:hidden;
父级元素添加前
<style>
.box {
background: yellow;
}
.a {
height: 100px;
width: 100px;
background-color: black;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="a">
</div>
</div>
父级元素添加后
<style>
.box {
overflow: hidden; /*为父级元素添加 overflow: hidden; */
background: yellow;
}
.a {
height: 100px;
width: 100px;
background-color: black;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="a"></div>
</div>
注意:为父级元素添加overflow:hidden后,浮动后面的元素依旧会跑到浮动的下面
为父级元素添加overflow:hidden只解决了浮动不会撑大父盒子的问题。
3.父级after伪元素
.clearfix::after { /*给父元素添加伪元素::after清除浮动*/
content: ""; /*必须写的属性*/
display: block; /*转化为块级元素*/
height: 0; /*盒子高度为0*/
clear: both; /*清除浮动*/
visibility: hidden; /*隐藏文字*/
}
用的时候可以直接复制
同overflow:hidden一样只解决了浮动不会撑大父盒子的问题,浮动后面的元素依旧会跑到浮动的下面。
4.父级双伪元素
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}