<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浮动</title>
<link href="css/1.css" rel="stylesheet"/>
</head>
<body>
<!--
传统的网页布局:标准流+浮动+定位
标准流:标签的显示规则(显示模式)
浮动:让块级盒子在一行内显示
定位:实现标签在网页中精准定位
<!-浮动float :
1.浮动的盒子会脱离标准流(脱标)
清除浮动的方法:
1.额外标签法:隔墙法
2.父级添加overflow:hidden属性
3.添加after伪元素
4.父级添加双伪元素
-->
<div class="clearfix">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="box1">4</div>
</body>
</html>
/* 初始化所有标签的内外边距 */
*{
margin: 0;
padding:0;
}
.box{
width: 200px;
height: 200px;
border: 1px solid black;
font-size: 36px;
text-align: center;
/* float: right; */ /* 右浮动 */
float: left; /* 左浮动 */
}
.box1{
width:300px;
height: 300px;
background-color: aqua;
}
.fu{
overflow: hidden;
}
/* 3.添加after伪元素 */
/*after:在...之后 */
.clearfix::after{
content: ""; /* 内容为空 */
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* 4.添加双伪元素 */
.clearfix::after,.clearfix::before{
content: "";
display: table;
}
.clearfix::after{
clear: both;
}