目录
| 浮动
浮动 · 简介
之前的网页都是默认布局，这种默认的布局方式称为「标准流」
在网页中，我们通过「标准流 、 浮动 、 定位」 三种方式布局网页，在本章我们介绍 「浮动」 这一布局方式
标准流中，所有的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>总结
2408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
