浮动
网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？
CSS的摆放盒子的方式有3种：普通流(标准流)盒子模型、浮动和定位。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
本编文章会讲到的知识点
普通流
浮动介绍
浮动的特性
浮动实现常见的布局方式
清除浮动的影响
普通流
普通流 normal flow，这个单词很多人翻译为 文档流 ，字面翻译 普通流 或者标准流都可以。
普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现意外外的情况叫做普通流布局。
浮动介绍
为什么需要浮动？
浮动的目的，就是为了更好的实现排列布局。在标准流中，也可以实现排列布局，但是存在问题，比如三个div盒子怎么横排一列？
理想效果
标准流实现代码：
div{
display: inline-block;
}
.l,.r{
width: 100px;
height: 100px;
background: gray;
}
.c{
width: 200px;
height: 100px;
background: gold;
}
标准流处理效果
浮动实现代码：
Documentdiv {
float: left;
}
.l,
.r {
width: 100px;
height: 100px;
background: gray;
}
.c {
width: 200px;
height: 100px;
background: gold;
}
浮动处理效果
浮动的使用方式
语法
作用
示例
float: left;
左浮动
div {float: left;}
float: right;
右浮动
div {float: right;}
浮动的特性
特点一：脱离标准文档流[普通流]
Document.one {
width: 100px;
height: 100px;
background: blue;
float: left;
}
.two {
width: 300px;
height: 200px;
background: gold;
}
浮动元素脱离文档流
特点二：浮动找浮动
浮动找浮动(一定是多个连续浮动的盒子)。
案例中浮动2、3、4都浮动不占据位置了，脱离了文档流所以5自然就上去了和1的底部并起。
Document.one,.five{
width: 400px;
height: 300px;
background: blue;
}
.two,.three,.four{
width: 100px;
height: 100px;
background: gold;
border:1px solid red;
float: left;
}
浮动找浮动
特点三：多个浮动的元素，以顶部基准对齐
多个浮动的元素(一定是多个连续浮动的元素),不管浮动元素的高是否相等，都以顶部基准对齐。
.one,
.five {
width: 300px;
height: 300px;
background: gold;
border: 1px solid blue;
}
.two,
.three,
.four {
width: 50px;
height: 50px;
background: red;
border: 1px solid pink;
float: left;
}
.three {
height: 100px;
width: 80px;
}
.four {
height: 20px;
width: 60px;
}
多个浮动的元素，以顶部基准对齐
浮动会改变元素的显示模式
浮动后的元素变成了行内块元素。
span {
width: 100px;
height: 100px;
border: 1px solid red;
background: gold;
/*
浮动会改变元素的显示模式，变为行内块级元素
*/
float: left;
}
aaaaaa
bbbbbb
浮动改变元素显示模式
文字环绕浮动的元素
div {
width:800px;
border:1px solid #666;
margin: 0 auto;
}
img {
width:300px;
float:right;
margin:10px;
}
你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
文字环绕浮动元素
清除浮动的影响
为什么要清除浮动的影响
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动的影响。
看下图，在蓝色盒子浮动的情况下黑色盒子会上浮，这种效果并不是我们想要的。
浮动的影响
清除浮动影响的方式
方式一：给父元素增高
缺点：在实际开发中，对于显示的内容的区域，一般情况高度不能写死，因为内容显示的数量不确定。所以对于内容区域显示的高度，应当由内容自适应。
* {
margin: 0;
padding: 0;
}
.father,
.uncle {
width: 1200px;
margin: 0 auto;
}
.father {
border: 1px solid;
height: 200px;
}
.father .son {
height: 200px;
background: blue;
border: 1px solid red;
}
.father .son1 {
width: 300px;
float: left;
}
.father .son2 {
width: 890px;
float: right;
}
.uncle {
height: 300px;
background: #000;
}
方式二：样式属性clear
内隔墙法：在父元素的内部最后一行设立一道墙(设立一个div)对所设立的墙，添加一个样式属性clear:both;外隔墙法：在父元素外部设立一道墙(设立一个div)对所设立的墙，添加一个样式属性clear:both;
缺点：每次清除浮动都要加一个标签，当一个页面清除浮动比较多时，冗余的标签也会越来越多。文件就会越来越大，传输的速度相对来说越来越慢，影响程序的性能。
* {
margin: 0;
padding: 0;
}
.father,
.uncle {
width: 1200px;
margin: 0 auto;
}
.father {
border: 1px solid;
}
.father .son {
height: 200px;
background: blue;
}
.father .son1 {
width: 300px;
float: left;
}
.father .son2 {
width: 890px;
float: right;
}
.uncle {
height: 300px;
background: #000;
}
.clearfix {
clear: both;
}
方式三：样式属性overflow:hidden;
给父元素加上一个overflow:hidden就是可以清除浮动 的影响。
缺点：这是一个偏方，虽然可以达到清除浮动的影响的效果，但是若父元素中有【定位】(后面讲)，会把溢出的部分给隐藏掉。
* {
margin:0;
padding: 0;
}
.father,.uncle {
width:1200px;
margin:0 auto;
}
.father {
border:1px solid;
/* 可以清除浮动影响的样本属性 */
overflow:hidden;
}
.father .son {
height:200px;
background:blue;
}
.father .son1 {
width:300px;
float:left;
}
.father .son2 {
width:890px;
float:right;
}
.uncle {
height:300px;
background:#000;
}
.clearfix {
clear:both;
}
方式四：:after伪元素
借助给父元素加:after伪元素实现(本质上是在模拟内隔墙法),
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {zoom: 1;} / IE6、7 专有 */
* {
margin:0;
padding: 0;
}
.father,.uncle {
width:1200px;
margin:0 auto;
}
.father {
border:1px solid;
}
.father .son {
height:200px;
background:blue;
}
.father .son1 {
width:300px;
float:left;
}
.father .son2 {
width:890px;
float:right;
}
.uncle {
height:300px;
background:#000;
}
.clearfix {
clear:both;
}
.clearfix:after {
/*
伪元素默认是行内元素
*/
content:".";
clear:both;
display:block;
height:0;
visibility:hidden;
}
.clearfix {
/* IE6、7 专有 */
*zoom:1;
}
方式五：使用before和after双伪元素清除浮动
.clearfix:before,.clearfix:after {
content:"";
display:block;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
* {
margin: 0;
padding: 0;
}
.father,
.uncle {
width: 1200px;
margin: 0 auto;
}
.father {
border: 1px solid;
}
.father .son {
height: 200px;
background: blue;
}
.father .son1 {
width: 300px;
float: left;
}
.father .son2 {
width: 890px;
float: right;
}
.uncle {
height: 300px;
background: #000;
}
.clearfix {
clear: both;
}
.clearfix:before,
.clearfix:after {
content: "";
display: block;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
解决浮动影响效果
实际工作中浮动使用还是很多的，刚开始学习的时候被浮动搞得一脸懵逼，记录下来大家一起看。
扫一扫
137
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
