为什么用浮动？
标准流，就是标签按照自己默认定好的方式排列
整个网页布局要有标准流、浮动、定位构成
浮动：用来改变标签默认的排列形式
多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
什么是浮动？
如果都是左浮动，第二个盒子会紧挨着第一个盒子，后一个紧挨着前一个相同的浮动
.left,
.right,
.div1 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.right {
float: right;
}
<div class="left">左浮动</div>
<div class="right">右浮动</div>
<div class="div1">中间</div>
浮动特性（重难点）
- 浮动元素脱离标准流（脱标）
- 不再保持原来的位置，让其他标准流占有
粉盒浮动前：
粉盒浮动后：
.box1 {
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.box2 {
width: 300px;
height: 300px;
background-color: blue;
}
多个浮动盒子会在一行上顶端对齐排列，如果这行装不下了就会另起一行进行排列
浮动元素会具有行内块元素特性
给行内元素添加浮动：
span {
width: 100px;
height: 100px;
background-color: pink;
}
浮动后
给块元素添加：
之后
浮动元素经常和标准流的父级搭配
<div class="box">
<div class="left">左</div>
<div class="right">右</div>
</div>
这样就能被限制在div里了
考虑优先级问题，还有超出父级标准流问题：
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
最后一个li不用右外边距了，另外给它恢复，但是要注意优先级问题
.box {
width: 1226px;
height: 285px;
background-color: pink;
margin: 0 auto;
}
.box li {
float: left;
width: 296px;
height: 285px;
background-color: white;
margin-right: 14px;
}
.box .last {
margin-right: 0px;
}
先设置盒子的大小，再设置盒子的位置
常见网页布局
自上而下
<div class="top">top</div>
<div class="banner">banner</div>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</div>
<div class="footer">footer</div>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.top {
height: 50px;
background-color: gray;
}
.banner {
width: 980px;
height: 150px;
margin: 10px auto;
background-color: gray;
}
.box {
width: 980px;
height: 300px;
margin: 0 auto;
background-color: pink;
}
.box li {
float: left;
width: 237px;
height: 300px;
background-color: yellow;
margin-right: 10px;
}
.box .last {
margin-right: 0px;
}
.footer {
height: 200px;
background-color: gray;
}
</style>
浮动的盒子只会影响后面的标准流不会影响前面的
一个标准流独占一行
所有父盒子必须有高度吗？如果子盒子数量高度都不知
.box {
width: 500px;
margin: 0 auto;
background-color: black;
}
.demo1 {
float: left;
width: 100px;
height: 100px;
background-color: pink;
}
.demo2 {
float: left;
width: 200px;
height: 100px;
background-color: purple;
}
两个子盒子添加浮动后，父级盒子的高度就变成0了
添加一个标准流标签：
就会取代父盒子的位置
清除浮动
策略：只让浮动在父盒子内部浮动，不影响父盒子外面的其他盒子
额外标签法（必须是块级元素，比如div)
<div class="box">
<div class="demo1">1</div>
<div class="demo2">2</div>
<div class="clear"></div>
</div>
<div class="demo3"></div>
.clear {
clear: both;
}
给父级添加浮动 overflow
.box {
width: 500px;
margin: 0 auto;
background-color: black;
overflow: hidden;
}
父级添加:after伪元素
clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
双伪元素清除浮动
.clearfix:before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
zoom: 1;
}
