1. 浮动(float)
1.1 传统网页布局的三种方式
- 普通流(标准流/文档流)
- 浮动
- 定位
1.2 标准流
标准流就是按照规定好默认方式排列。
- 块级元素会独占一行,从上向下排列。
- 行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。
1.3 为什么需要浮动?
浮动的最典型应用:可以让多个块级元素排列在同一行显示。
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。
1.4 什么是浮动?
float属性用于创建浮动框,将其移动到一边,知道左边缘或有边缘触及包含块或另一个浮动的边缘。
1.5 浮动特性(重)
- 设置了浮动的元素最重要特性:
- 脱离标准流的控制移动到指定位置(脱标)。
- 浮动的盒子不再保留原先的位置。
-
如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对齐排列。
浮动的元素是互相贴靠在一起的,不会有缝隙。如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐。
-
任何元素都可以浮动。不管原先是什么模式的元素,添加浮动后具有行内块元素相似的特性。
/* 任何元素都可以浮动。不管原先是什么模式的元素,添加浮动后具有行内块元素相似的特性 */ span, div { /* 行内元素span设置了浮动后可以设置宽高 */ float: left; width: 200px; height: 100px; background-color: pink; } /* 如果行内元素有了浮动,则不需要转换块级\行内块元素就可以设置宽高 */ p { height: 200px; float: right; background-color: yellow; }
1.6 浮动元素经常和标准流父级搭配使用
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 1200px;
height: 460px;
background-color: pink;
margin: 0 auto;
}
.left {
float: left;
width: 230px;
height: 460px;
background-color: yellow;
}
.right {
float: left;
width: 970px;
height: 460px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
2. 常见网页布局
2.1 常见网页布局案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.top {
height: 50px;
background-color: gray;
margin-bottom: 10px;
text-align: center;
}
.banner {
width: 800px;
height: 150px;
background-color: gray;
margin: 0 240px;
text-align: center;
margin-bottom: 15px;
}
.box {
width: 800px;
height: 270px;
background-color: pink;
margin: 0 240px;
}
.box div {
width: 194px;
height: 270px;
float: left;
margin-right: 8px;
background-color: gray;
}
.box .last {
margin-right: 0;
}
.footer {
height: 150px;
background-color: gray;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div class="last">4</div>
</div>
<div class="footer">footer</div>
</body>
</html>
2.2 浮动布局注意点
- 浮动和标准流的父盒子搭配使用。
- 如果一个元素浮动了,理论上其余的兄弟元素也要浮动。浮动的盒子只会影响后面的标准流,不会影响前面的标准流。
3. 清除浮动
3.1 概述
由于父级盒子很多情况下不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为0,就会影响下面的标准流盒子。
清除浮动的本质是清除浮动元素造成的影响,如果父盒子本身有高度,则不需要清除浮动。清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了。
选择器{clear:属性值;}
在实际开发中,几乎只用clear:both;。
清除浮动的策略:闭合浮动。
3.2 清除浮动方法
1. 额外标签法(隔墙法)
在最后一个浮动元素的后面添加一个空的块级标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 900px;
border: 2px solid royalblue;
}
.box div {
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.box .clear {
clear: both !important;
}
.bottom {
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
/* 增加一个块级空标签 */
<p class="clear"></p>
</div>
<div class="bottom"></div>
</body>
</html>
优点:通俗易懂,书写方便。
缺点:添加许多无意义的标签,结构化较差。
2. 父级添加overflow
可以给父级添加overflow属性,将其属性值设置为hidden、auto或scroll。
.box {
width: 900px;
border: 2px solid royalblue;
overflow: hidden;
}
优点:书写简单。
缺点:溢出隐藏。
3. :after伪元素法
:after方法是额外标签法的升级版,给父元素添加:
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7专有 */
*zoom: 1;
}
优点:结构语义化正确。
缺点:由于IE6-7不支持:after,兼容性问题。
4. 双伪元素清除浮动
给父元素添加:
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
优点:结构语义化正确。
缺点:由于IE6-7不支持:after,兼容性问题。