浮动(Fload)
- 相关概念
- 浮动的特性和使用
- 清除浮动
一、相关概念
1.1、标准流(普通流/文档流)
标准流:即标签按照默认的排列方式排列。
- 块级元素:独占一行,从上往下排列。(div、hr、h1~h6、ul、ol、form、table等)
- 行内元素,从左往右排列,碰到父元素边缘自动换行。(span、a、i、em等)
1.2、浮动流
浮动流:顾名思义,将物体(元素)向某一个方向浮起来。如果说标准流中的元素是河底的石头,那么浮动流中的元素就是水面上的漂浮物。
河水总是有流向的,石头不会因为流向而搬家,但是漂浮物却会!就像波澜不惊的湖面上漂浮着一些树叶,一阵北风拂过,树叶就会北漂而直至边境,一阵南风拂过,这些树叶又会南漂直至边境。湖水就是fload属性,风向(流向)就是fload属性的值。
二、浮动的特性和使用
<body>
<div class="div" id="div1">1</div>
<div class="div" id="div2">2</div>
<div class="div" id="div3">3</div>
</body>
2.1、浮动元素会脱离文档流
- 浮动元素会脱离文档流的控制,移动(浮)到指定位置。简称脱标。
- 浮动的盒子不再保留原先的位置。
#div1{
width:150px;
height: 80px;
background-color: red;
float: left;/*脱离文档流*/
}
#div2{
width:200px;
height:100px;
background-color: green;
}
2.2、浮动的元素会在一行内显示,且顶部对齐
- 如果给多个盒子设置了浮动,他们会按照属性值在一行内显示,且顶端对齐。
.div{
width:200px;
height: 100px;
float: left;
}
#div1{
background-color: hotpink;
}
#div2{
background-color: green;
}
#div3{
background-color: yellow;
}
2.3、浮动的元素会具有行内块元素的特新
- 任何元素都可以加浮动。不管之前是什么模式的元素,加了浮动之后就具有行内块元素的特性了。
三、清除浮动
<body>
<div id="outer1">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="clear"></div><!--空盒子,不显示-->
outer1
</div>
<div id="outer2">outer2</div>
</body>
3.1、为什么要清除浮动?
由于父元素在很多情况下不方便给高度,但是其子元素由于浮动流的缘故不占用高度,就会导致父元素的高度为0,这样就会导致后面的标准流排列出错(就像下面的案例一样)。
.div{
width:200px;
height: 100px;
float: left;
background-color: hotpink;
}
#outer1{
background-color: yellow;
}
#outer2{
width: 100%;
height: 200px;
background-color: green;
}
3.2、清除浮动
- 清除浮动的本质,就是清除浮动元素造成的影响。
- 如果父元素有高度,则不需要清除浮动
- 清除浮动以后,父元素会根据其浮动子元素自动检测高度并调整。就不会影响后面的排版了。
语法:clear:值;
/* 1、left:清除左侧浮动的影响(不允许左侧有浮动元素)
2、right:清除右侧浮动的影响(不允许右侧有浮动元素)
3、both:同时清除左右两侧浮动的影响。
*/
3.3、清除浮动的四种方法
1)、隔墙法(额外标签)
.div{
width:200px;
height: 100px;
float: left;
background-color: hotpink;
}
#outer1{
background-color: yellow;
}
#outer2{
width: 100%;
height: 200px;
background-color: green;
}
.clear{
clear:left;
}
空标签必须是块元素。推荐使用DIV
2)、给父元素添加overflow属性(可选值:hidden、auto、scroll)
.div{
width:200px;
height: 100px;
float: left;
background-color: hotpink;
}
#outer1{
overflow:hidden;
background-color: yellow;
}
#outer2{
width: 100%;
height: 200px;
background-color: green;
}
溢出的子元素会被截断,无法显示
3)、给父元素添加:after
伪元素
略
4)、给父元素添加双伪元素:after
、:before
略