目录
| 浮动
浮动 · 简介
之前的网页都是默认布局,这种默认的布局方式称为「标准流」
在网页中,我们通过「标准流 、 浮动 、 定位」 三种方式布局网页,在本章我们介绍 「浮动」 这一布局方式
标准流中,所有的div默认占一行。浮动,可以让多个div在一行上 「按照指定像素间隔」 展示
标准流中,div无法进行左右的分别对齐。浮动,可以让2个div分别在左右展示
浮动 · 语法和作用
语法
行元素、块元素、行内块元素 都可以添加浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.basic {
width: 200px;
height: 200px;
float: left;
background-color: blue;
}
.basic2 {
width: 200px;
height: 200px;
float: left;
background-color: pink;
}
</style>
</head>
<body>
<div class="basic"></div>
<div class="basic2"></div>
</body>
</html>
浮动 · 三大特性简介
基本特性
-
浮动元素会脱离标准流 (脱标)
-
浮动的元素会一行内显示并且元素顶部对齐
-
浮动的元素会具有行内块元素的特性
特性一 : 脱标
-
脱离标准普通流的控制(浮) 移动到指定位置(动), (俗称脱标)
-
浮动的盒子不再保留原先的位置(即,原先这个盒子的位置,浮动之后把位置让给了别的盒子)
.class1 {
width: 300px;
height: 300px;
background-color: pink;
float: left;
}
.class2 {
width: 300px;
height: 400px;
background-color: blue;
}
特性二 : 浮动的元素在一行内顶部对齐显示
-
若三个盒子都浮动,则这三个盒子自动 在一行内显示、且在 顶端 对齐
-
浮动的元素是互相贴靠在一起的(不会有缝隙)
-
若父级宽度装不下这些浮动的盒子, 多出的盒子会另起一行对齐
<style>
.class1 {
width: 300px;
height: 300px;
background-color: blue;
float: left;
}
.class2 {
width: 300px;
height: 400px;
background-color: pink;
float: left;
}
.class3 {
width: 300px;
height: 200px;
background-color: blue;
float: left;
}
</style>
特性三 : 浮动元素具有行内块元素特性
任何元素都可以浮动。不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性。
因此,若添加了浮动,就不需要再声明 display: inline-block 了
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* * {
margin: 0;
padding: 0;
} */
.block {
width: 300px;
height: 300px;
float: left;
background-color: pink;
}
.span {
margin: 0; /* p有默认的margin,需要清空,从而实现顶部对齐 */
width: 300px;
height: 300px;
float: left;
background-color: blue;
}
.inline-block {
width: 300px;
height: 300px;
float: left;
background-color: pink;
}
</style>
</head>
<body>
<div class="block">块级元素</div>
<p class="span">行级元素</p>
<input type="text" value="行内块元素" class="inline-block"/>
</body>
| 浮动的应用
浮动 · 使用准则
平常的网页中:网页的元素并不都是全部居左或者居右靠齐的,而是被一个标准流父盒子约束着
小练习:使用浮动进行布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
height: 410px;
width: 1030px;
background-color: pink;
}
/* 10 + (5+5) + 10 */
.box1 {
float: left;
margin: 5px;
margin-left: 10px;
width: 300px;
height: 400px;
background-color: blue;
}
.box2 {
float: left;
margin: 5px;
margin-right: 10px;
width: 700px;
height: 400px;
background-color: greenyellow;
border: transparent;
list-style: none;
}
.box .box2>div {
float: left;
margin: 5px;
height: 190px;
width: 340px;
background-color: pink;
border: transparent;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">box1</div>
<div class="box2">
<div>A</div>
<div>A</div>
<div>A</div>
<div>A</div>
</div>
</div>
</body>
</html>
| 常见网页布局
基本思路
-
若宽度和浏览器一样宽,则不需要设置width
-
一般父盒子使用标准流,然后标准流内使用浮动
-
一般父盒子需要居中显示,使用 margin: 0 auto;
-
注意浮动盒子之间的margin值 与 父盒子width、height值之间的相等关系,一定要计算好!
布局一:全部标准流盒子
布局二:在某个标准流盒子中添加浮动
布局三:中间体使用水平居中窄一点的盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.top {
/* width和浏览器默认的一致,不用设置 */
height: 50px;
margin-top: 20px;
background-color: pink;
}
.banner {
height: 120px;
width: 1010px; /*设置快读*/
margin: 10px auto; /*居中*/
background-color: green;
}
.box {
height: 300px;
width: 1010px;
margin: 10px auto;
background-color: lightblue;
}
.box>.box1 {
float: left;
margin: 10px;
}
.box>div {
float: left;
background-color: pink;
margin: 10px;
margin-left: 0;
height: 280px;
width: 240px;
}
.footer {
height: 300px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="box">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
</div>
<div class="footer">footer</div>
</body>
</html>
| 清除浮动
浮动 · 使用时的注意点
-
先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置
-
浮动的本质:被浮动的元素,会以上一个标准流的下底为顶线对齐,然后其后的标准流,会顶替该浮动元素的位置。
-
我们建议:父盒子内的元素,只要有一个浮动,则其余的兄弟元素也都要浮动
清除浮动 · 导论(重点)
-
目前的浮动,看似功能很强大,但实际上还有一个问题,导致有些场景下的布局以目前的知识无法完成。
-
之前的实例中,所有浮动盒子的父盒子都有高度。但是有时候父盒子并没有确切的高度:如新闻、产品列表
-
理想的状态是:让父盒子的高度随子盒子浮动后的高度而变化 -
我们来看以下几个例子,体会一下 “没有设置高度的父盒子,遇到浮动的子元素,会产生的变化 —— height变为了0”
1. 父盒子不加高度,子盒子有宽和高,但是不浮动 的情况:父盒子的高度 = 两个子盒子的高度之和
2.代码和 [1] 中一样,但是给两个子盒子添加浮动 此时父盒子因为子盒子浮动了,而认为没有子元素,height此时等于0,消失了
这会严重影响 “含有浮动的的子元素 、 且不方便设置高度 的父盒子” 接下来的标准流盒子的排版位置! (因为此时父盒子被认为是一条线,height=0)
由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为 0 时,就会 影响下面的标准流盒子
因此,清除浮动 就是用来解决这个棘手的问题的。
学习了清除浮动,我们可以知道如何设置一个随 浮动子元素的高度变化 而变化自身的height 的标准流盒子
清除浮动 · 本质
为什么需要清除浮动?
-
由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为 0 时,就会 影响下面的标准流盒子
-
由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响
清除浮动的本质:
-
清除浮动的本质是清除浮动元素造成的影响 而不是把浮动的效果清除
-
如果父盒子本身有高度,则不需要清除浮动
-
清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了
清除浮动 · 基本语法
清除浮动的语法:
-
基本语法 选择器 . { clear: left 或 right 或 both } (一般都使用both)
-
关键在于,这个属性加在哪个选择器上,是有明确要求的策略的
清除浮动 · 基本语法 · 额外标签法
策略一:使用额外标签法
-
语法:在最后一个浮动元素的后面,添加一个额外块级标签,并给予一个选择器,在该额外标签的选择器中定义属性 clear: both
-
原理:在最后一个浮动元素的后边,添加一个额外的块级元素标签,从而提示父盒子,这个块级元素所在的位置为标准流的底,从而达到 父盒子的高度随浮动而变化 的效果
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 300px;
background-color: green;
}
.box1 {
float: left;
width: 200px;
height: 100px;
background-color: yellow;
}
.box2 {
float: left;
width: 200px;
height: 200px;
background-color: blue;
}
.clearname {
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="clearname"></div>
</div>
</body>
<a name="父级盒子添加overflow: hidden 清除浮动"></a>
清除浮动 · 基本语法 · 父级盒子添加overflow
-
语法:给父级盒子添加 overflow: hidden 或 auto 或 scroll
-
原理:该原理比较复杂,设计BFC规则及相关知识,以后深入学习。
<a name=":after伪元素法清除浮动"></a>
清除浮动 · 基本语法 · :after伪元素法(常用)
-
语法:把下列语句复制下来,然后粘贴到style内,然后在父盒子中添加一个名为 clearfix 的class即可清除浮动
-
这样很方便:需要清除浮动的元素,则只需要在父类添加一个class:clearfix就可以了!很方便
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1;
}
-
原理:以后会说 伪选择器after的作用,现在先学会用就行了(简单来说就是:after之后,会自动产生一个新的盒子,起作用相当于额外标签法清除浮动)
-
语法示例(在 浮动导致父盒子高度为0 的代码基础上进行修改,使之清除浮动带来的格式问题)
<style>
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1;
}
.box {
/* overflow: hidden; */
width: 300px;
background-color: green;
}
.box1 {
float: left;
width: 200px;
height: 100px;
background-color: yellow;
}
.box2 {
float: left;
width: 200px;
height: 200px;
background-color: blue;
}
/* .clearname {
clear: both;
} */
</style>
<body>
<div class="box clearfix">
<div class="box1">1</div>
<div class="box2">2</div>
<!-- <div class="clearname"></div> -->
</div>
</body>
清除浮动 · 基本语法 · 双伪元素清除浮动(常用)
-
基本语法:把下列语句复制下来,然后粘贴到style内,然后在父盒子中添加一个名为 clearfix 的class即可清除浮动
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
语法示例:
<style>
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1;
}
.box {
/* overflow: hidden; */
width: 300px;
background-color: green;
}
.box1 {
float: left;
width: 200px;
height: 100px;
background-color: yellow;
}
.box2 {
float: left;
width: 200px;
height: 200px;
background-color: blue;
}
/* .clearname {
clear: both;
} */
</style>
</head>
<body>
<div class="box clearfix">
<div class="box1">1</div>
<div class="box2">2</div>
<!-- <div class="clearname"></div> -->
</div>
</body>
总结