浮动布局
what|why：让块级(block)标签在父级的宽度限制下同行显示，一行显示不下，自动换行
注：要到达一行显示个数固定，一定要固定父级的宽度
语法：
子级 {
float: left|right;
}
问题：子级不再撑开父级高度(不完全脱离文档流)
脱离文档流: => 层次结构会上移，覆盖有位置重叠且没脱离文档流的标签
不完全：浮动布局后，可以重新让子级撑开父级高度
清浮动：让不完全脱离文档流的子级重新撑开父级的高度，这种做法就叫做清浮动
语法:
父级:after {
content: "";
dislpay: block;
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动布局</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.div {
width: 200px;
height: 200px;
background-color: yellow;
margin-right: 10px;
float: right;
}
</style>
<style>
.ul1 {
background-color: pink;
width: 600px;
margin: 0 auto;
}
.ul1 li {
width: 200px;
height: 60px;
}
.ul1 li:nth-child(2n) {
background-color: orange;
}
.ul1 li:nth-child(2n - 1) {
background-color: red;
}
.ul1 li {
float: left;
}
.ul1:after {
content: "";
display: block;
clear: both;
}
.bro {
width: 50px;
height: 50px;
background-color: black;
}
</style>
</head>
<body>
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class="bro"></div>
<style>
.box:after {
content: "000";
}
.box:before {
content: "***";
}
</style>
<div class="box">123</div>
</body>
</html>
浮动案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动案例</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.ul1 {
width: 825px;
margin: 0 auto;
background-color: black;
}
.ul1 li {
width: 200px;
height: 120px;
background-color: red;
margin-right: 15px;
float: left;
}
.ul1 li:first-child {
width: 180px;
}
.ul1 li:last-child {
margin-right: 0;
}
.ul1:after {
content: "";
display: block;
clear: both;
}
</style>
<style>
.box1 {
background-color: pink;
padding: 10px 0;
}
.box1:after {
content: "";
display: block;
clear: both;
}
.box1 h3 {
float: left;
}
.box1 ul {
float: right;
}
.box1 li {
float: left
本文深入探讨了前端布局中的浮动布局，包括浮动案例；接着详细讲解了不同类型的定位技术，如固定定位、绝对定位和相对定位；最后，通过定位动画案例展示了如何在实践中实现动态效果。
最低0.47元/天 解锁文章
919
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
