为什么需要浮动?
因为很多的布局效果,标准六没办法完成,此时就需要浮动来完成布局。
因为浮动可以改变元素标签的默认排列方式。比如浮动可以让多个块级元素在一行内排列显示。
会使元素向左或向右移动,其周围的元素也会重新排列。
浮动演示
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。
代码演示浮动效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.thumbnail
{
/*给thumbnail类添加浮动*/
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>
<body>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
</body>
</html>
结果:
浮动特性
- 浮动元素会脱离标准流的控制(浮),移动到自动位置(动)
- 脱标:浮动的盒子不再保留原先的位置
- 浮动的元素会一行内显示并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性
- 如果块级盒子没有设置宽度,这默认宽度和父级一样宽。添加浮动之后,其大小根据内容来决定
- 浮动的盒子中间是没有缝隙的,是紧挨在一起的
浮动布局注意点
- 浮动和标准流的父盒子搭配:
先用标准流的父元素排列上下位置,之后再在每个上下排列的父元素里面采取浮动布局,从而来控制子元素的左右位置。
- 一个元素浮动,理论上其余的兄弟元素也应该需要浮动:
一个盒子里面有多个盒子,如果其中一个盒子浮动了,其他盒子不浮动的话,可能会引起问题。此外,浮动的盒子只会影响盒子后面的标准流,不会影响前面的标准流。
清除浮动
清除浮动语法
选择器{clear: 属性值;}
属性值 | 描述 |
---|---|
left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
right | 不允许右侧有浮动元素(清除右侧浮动的影响) |
both | 同时清除左右两侧浮动的影响 |
在是实际开发中,多使用clear: both;
清除浮动方法
- 额外标签法,也称为隔墙法,是W3C推荐的做法
- 父级添加overflow属性
- 父级添加after伪元素
- 父级添加双伪元素
额外标签法(隔墙法)清除浮动
额外标签法:会在浮动元素末尾添加一个空标签。
例如:(新的空标签必须是块级元素)
<div style=" clear: both"> </div>
优点:简单。
缺点:添加许多无意义的标签,结构化较差
父级添加overflow清除浮动
可以给父级添加overflow属性,将其属性值设置为hidden、auto或scroll。
:after伪元素法
:after方式是额外标签法的升级版,也是给父元素添加
代码如下:
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/*IE6、7专有*/
*zoom: 1;
}
双伪元素清除浮动
也是给父元素添加,代码简介,小米,腾讯等网站都是使用此方法。代码如下:
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom:1;
}