<html>
<head>
<meta charset="utf-8" />
<title>浮动</title>
<style>
*{ /* 初始化所有标签 */
margin: 0;
padding: 0;
}
.box{
width: 330px;
height: 330px;
border: 1px solid blue;
font-size: 36px;
text-align: center;
float: left;
}
.box2{
width: 300px;
height: 300px;
background-color: aqua;
}
.clear{
clear: both;
/* }
.fu{
overflow: hidden; */
}
/* 3.添加after伪元素 */
.clearfix:;after { /* 在什么之后 */
content: ""; /* 内容为空 */
display: block; /* 转为块元素 */
height: 0; /* 清除两端浮动 */
clear: both;
visibility: hidden;
}
</style>
</head>
<body>
<!-- 传统的网页布局:标准流(元素的显示模式)+浮动+定位 -->
<!-- 浮动float:让块级元素一行内显示
float:left;左浮动,盒子从左往右摆
fioat:right;右浮动,盒子从右往左摆
float:noon;不浮动,默认值
1.浮动的元素会脱标(脱离标准流)
2.浮动元素会一行内显示并且元素顶部对齐
3.浮动的元素
清楚浮动标签法:
1.隔墙法
2.给父盒子添加overflow:hidden;
3.给父元素添加after伪元素
-->
<!-- 快速创建标签:
1.直接创建标签:标签名*个数>tab键
2.创建带有类名的标签:标签名*个数>tab键
3.创建带有类名的div:.类名*个数>tab键 -->
<div class="clearfix">
<div class="box">1</div>
<div class="box" >2</div>
<div class="box" >3</div>
<!-- <div class="clear"></div>冗余代码 -->
</div>
<div class="box2"></div>
</body>
</html>
浮动与定位
最新推荐文章于 2024-08-18 23:31:20 发布