目录
一、浮动
1、为什么使用浮动？
2、浮动的概念
3、语法
4、浮动的特性
（3）浮动的元素会具有行内块元素的特性
5、浮动元素经常和标准流父级搭配使用
6、浮层的弊端
（1）高度塌陷
（2）兄弟盒子文字环绕
7、清除浮动的方式
（1）每个盒子单独定义with和height
（2）父盒子最下方引入清除浮动块
（3）after伪元素清除浮动（推荐）
二、清除浮动
1、概念
2、作用
3、语法
三、盒子的展示
1、语法
（1）block
（2） inline
（3） inline-block
（4） none
一、浮动
1、为什么使用浮动？
我们可以看到上面的图片，每个盒子都独占一行显示，这样看右边有一大部分空间都是浪费的，而我们应该如何解决这个问题呢？
此时我们可以将盒子模块转换为行内块级元素，实现一行显示
我们利用之前的知识将盒子转换为行内块元素可以实现一行显示，但是还不够完美，他们之间会有大的空白缝隙，很难控制。因此，我们可以使用浮动来实现我们想要的效果。
2、浮动的概念
浮动（float）是使用率较高的一种定位方式。有时希望相邻块级元素的盒子左右排列（所有盒子浮动），或者希望一个盒子被另一个盒子中的内容所环绕（一个盒子浮动）做出图文混排的效果时，最简单的方法就是运用浮动属性使盒子在浮动方式下定位。它允许元素脱离常规的文档流，并浮动到其父元素的左侧或右侧，从而使其他内容围绕其周围布局。
3、语法
float:none|left|right
left：元素向左浮动，其他内容将围绕其右侧进行布局。
right：元素向右浮动，其他内容将围绕其左侧进行布局。
none：默认值，元素不浮动，将按照正常布局进行渲染。
代码如下：
<head>
<style>
article{
width: 800px;
height: 500px;
background-color: #fff9c7;
margin-bottom: 5px;
}
div{
width: 200px;
height: 100px;
background-color:#d9cde5;
}
#div2{
background-color: #f2ae86;
float: left;
}
#div3{
background-color: #f6a09a;
float: left;
}
#div4{
background-color: #95b1ce;
}
</style>
</head>
<body>
<article>
<div>A</div>
<div id="div2">B</div>
<div id="div3">C</div>
<div>D</div>
<div>E</div>
</article>
</body>运行结果如下：
或许这张图片有点难以理解浮层的效果，我们可以看下面这张图片。
4、浮动的特性
（1）浮动元素会脱离标准流（脱标）
（2）浮动的元素会一行内显示并且元素顶部对齐
- 向上向左or向上向右排列
- 若空间无法容纳,则先向下移动,直到高度足够后再向左向右
- 当前浮动盒的顶边,不得高于上一个浮动盒的顶边
（左边为浮动前，右边为浮动后）
（3）浮动的元素会具有行内块元素的特性
·任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性
5、浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置，我们网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。符合网页布局第一准侧。
6、浮层的弊端
虽然浮动带来了很多布局上的便利，但也会带来一些问题。
（1）高度塌陷
当一个容器内的子元素都被设置为浮动时，容器的高度可能会塌陷，即容器的高度变为零，无法正确地包含浮动元素。这会导致布局混乱，影响后续元素的定位和显示。
（2）兄弟盒子文字环绕
盒子浮动后，文档流后面的兄弟盒子会自动递补其位置。其中，文本会非常敏感，将自动环绕浮动盒。举个例子，比如我们平时看的报纸就是文字环绕
(浮动机制的设计初衷:不是为了给你做导航栏的，而是用来制作图文混持效果的页面，但如今很少使用，便变成了副作用)
7、清除浮动的方式
而我们为了解决父盒高度塌陷和兄弟盒文字环绕等问题，我们需要使用清除浮动的方法。以下是几种常见的清除浮动的方式：
（1）每个盒子单独定义with和height
简单粗暴的方法盒子大小写死，给每个盒子设定固定的with和height，直到合适为止。
优点：快速简单，兼容性良好，适合只改动少量内容不涉及盒子排布的版面。
缺点：非自适应布局，浏览器的窗口大小直接影响用户体验
（2）父盒子最下方引入清除浮动块
优点：简单快速、代码少
缺点：增加空标签，引入冗杂元素，不利于页面优化，不推荐
（3）after伪元素清除浮动（推荐）
给外部元素的after伪元素设置clear属性再隐藏它，对空盒子方案的改进。
优点：纯css解决盒子塌陷问题，没有引入任何冗杂的元素。
本次我们讲解第2种方法，在父盒下方引入清楚浮动，后续再讲解伪元素。
二、清除浮动
1、概念
为当前盒子设置一个clear属性，清除前面盒子淨动对它的影响。
2、作用
可以解决高度塌陷和兄弟盒文字环绕的问题。
3、语法
clear:清除前面盒子浮动对后面盒子的影响
clear: both|left|right- lelt清除前面盒子左浮动的影响
- righ请除前面盒子右浮动的影响
- both清除前面盒子的浮动影响 （不管左浮动还是右浮动）
如果父盒由于各种原因未设置高度， 子盒的浮动会导致父盒的高度塌陷。父盒高度塌陷后会影响父盒的兄弟盒的布局此时我们就可以使用clear属性。
代码如下：
id为div5的盒子无实际显示效果，主要用于将父盒撑开，避免父盒塌陷影响其他的布局。
前端开发的原则是非必要并不改变HTML的结构，样式设计只通过CSS实现。
<head>
<style>
article{
/* height: 600px; */
background-color:#f1cbb6;
border: 5px solid #000;
}
#div1{
width: 300px;
height: 70px;
background-color:rgb(217, 134, 217);
border: 5px solid #000;
margin-bottom: 5px;
float: left;
}
#div2{
width: 300px;
height: 70px;
background-color: #3a7b99;
border: 5px solid #000;
margin-bottom: 5px;
float: left;
}
#div3{
width: 300px;
height: 70px;
background-color: #f6a09a;
border: 5px solid #000;
margin-bottom: 5px;
float: left;
}
/* 添加边框方便观察 */
#div5{
width: 300px;
border: 5px solid red;
}
footer{
width: 1500px;
height: 100px;
background-color:#f5daab;
border: 5px solid #000;
}
</style>
</head>
<body>
<article>
<div id="div1">盒子1</div>
<div id="div2">盒子2</div>
<div id="div3">盒子3</div>
<div style="clear: both;" id="div5"></div>
</article>
<footer>
我是网页页脚
</footer>
</body>
</html>运行结果如下：
（红色的地方为id为div5的空盒子）
三、盒子的展示
1、语法
display: none|block|inline（1）block
● 以块级元素的形式显示。块级元素会独占一行，例如<div>、<p>、<h1>等标签默认的display属性值就是block。
（2） inline
● 以行内元素的形式显示。行内元素不会独占一行，而是与其他行内元素在同一行内显示。例如<span>、<a>等标签默认的display属性值就是inline。
（3） inline-block
● 结合了行内元素和块级元素的特点。它既可以像行内元素一样在同一行内显示，又可以像块级元素一样设置宽度、高度、内边距和外边距等属性。
● 常用于创建水平排列的菜单、按钮等元素。
（4） none
● 隐藏元素，使其在页面上不显示。被设置为none的元素不会占据任何空间，也不会被浏览器渲染。
代码如下：
<head>
<style>
article{
width: 500px;
height: 500px;
background-color:gray;
border: 5px solid #000;
}
#div1{
width: 100px;
height: 50px;
background-color:purple;
border: 5px solid #000;
margin-bottom: 5px;
display: inline-block;
}
#div2{
width: 100px;
height: 50px;
background-color: red;
border: 5px solid #000;
margin-bottom: 5px;
display: none;
}
#div3{
width: 100px;
height: 50px;
background-color: green;
border: 5px solid #000;
margin-bottom: 5px;
display: inline-block;
}
</style>
</head>
<body>
<article>
<div id="div1">盒子1</div>
<div id="div2">盒子2</div>
<div id="div3">盒子3</div>
</body>运行结果如下：
