浮动布局——实现网页经典布局
写在前面：勤学勤练，方能实现。浮动布局是一种经典的网页布局方式，它可以代替inline-block，实现将多个块元素置于一行的效果。本文对浮动布局相关知识点进行细叙与总结。重点在于实现浮动布局以及清除浮动布局带来的高度塌陷等影响。
1、浮动的基本语法
定义：
（文档流：元素排版布局中，默认自动从左往右、从上往下流式排列。）
浮动使元素脱离文档流并按照指定方向发生移动，遇到父级边界或相邻的浮动元素时停下来。
float属性：
float属性规定一个元素是否浮动，以及浮动的方向。
float属性的值：
| 值 | 描述 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 默认值，元素不浮动，并显示其在文本中出现的位置 |
| inherit | 从父元素中继承float属性的值 |
float: left;
2、浮动的特征
1.脱离文档流
通过元素的class值“box”给元素添加相应的float属性，box会脱离文档流，向指定方向浮动。这也意味着box无需占据位置，其他元素按照box不存在的情况进行排列，即会出现另一个元素移动到box元素的位置上。
2.只影响内联元素布局
元素浮动之后，不会影响其他块元素的布局，只会影响内联元素的布局。（利用这个特性可以做出图文环绕的效果）
例如，HTML代码：
<body>
<img src="img/BaiduMap.jpeg" />
<span>百度地图（Baidu Maps）自2005年上线以来，秉持“科技让出行更简单”的品牌使命，
以"科技"为手段不断探索创新，已经发展成为国内领先的互联网地图服务商。
百度地图具备全球化地理信息服务能力，包括智能定位、POI检索、路线规划、导航、路况等。
伴随着AI时代的到来，作为“新一代人工智能地图”，百度地图90%数据生产环节已实现AI化，
智能语音助手累计用户数突破5亿，并上线全球首个地图语音定制功能，让用户出行更具个性化。
百度地图覆盖POI 达1.8亿， 道路里程超1000万公里，刷新了行业新高度。
同时，百度地图是业内拥有丰富全景数据的地图服务商，街道全景已覆盖国内95%的城市，全景照片突破20亿张。</span>
</body>
CSS代码：
img{
width: 10%;
height: 10%;
float: left;
}
效果如下图：
3.块元素在同一行显示
浮动可以取代inline-block的功能，让多个块元素同处一行。
4.默认内容撑开宽度
未设置宽度时，根据块元素的特征，宽度撑满整行。处于浮动状态下的块元素，将默认内容撑开宽度。
5.内联元素支持宽高
未设置浮动的情况下，根据内联元素的特点，所设置的宽高无效，默认内容撑开宽度。给内联元素设置float属性后，内联元素可支持宽高。
补充：BFC
BFC 即 Block Formatting Context 块级格式化上下文。
BFC是每个属性的隐藏样式。BFC是一个独立的布局环境，其中的元素布局不受外界影响。开启BFC的元素具有以下特点：
- 开启了BFC的元素与其父元素的垂直外边距不会发生重叠；
- 开启了BFC的元素会包含其浮动的子元素；
- 开启了BFC的元素不会被浮动元素所覆盖。
要使一个HTML元素触发BFC，满足下列任意一个条件即可：
- float的值不是none；
- position的值不是static或relative；
- display的值是inline-block、table-cell、flex、table-caption或inline-flex；
- overflow的值不是visible。
详细说明可以阅读下面两篇文章：
BFC是什么？10 分钟讲透BFC 原理——来源:传智播客
什么是BFC？看这一篇就够了——来源：CSDN
3、clear属性
clear属性规定元素在某一方向上不允许有其他浮动元素。（一般只作用于块元素）
工作原理：自动为设置了clear属性的元素增加外边距。如果给名为box的元素声明为clear:left，box的上外边框（border-top）的边界将在左侧浮动元素的下外边框（border-bottom)边界之下。
clear属性的值：
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素 |
| right | 在右侧不允许浮动元素 |
| both | 在左右两侧不允许浮动元素 |
| none | 默认值，允许浮动元素出现在两侧 |
| inherit | 从父元素继承clear属性的值 |
4、清除浮动
需要清除浮动，是因为浮动布局也存在一些缺陷，例如：
- 当元素浮动时，会脱离文档流；
- 当父级包含框的高度小于浮动框的高度时，会发生高度塌陷
（ 高度塌陷：当元素的宽高大于父级元素的宽高，该元素浮动之后由于脱离了文档流，无法撑起父级的高度，父级元素的高度将变为0，称为页面发生高度塌陷。）
高度塌陷现象：
清除浮动后效果：
清除浮动带来的影响的方法：
1.给浮动元素的父级设置高度
给浮动元素的父级设置与它相等（或大于）的高度。但这种方法存在一些缺点：一是不知道子元素高度时无法操作；二是可扩展性差，在父元素中添加其他内容时，父元素的高度也会发生变化。
2.给浮动元素的父级添加CSS样式float:left
给浮动元素的父级添加CSS样式float:left，为父级开启BFC。但是这种方法看似撑开了父级的高度，但并不能完全解决问题，因为父级的父级也会同样面临高度塌陷的问题。此外，这两个元素浮动之后会脱离文档流，其他元素会顶替它们的位置，造成页面混乱。
3.给浮动元素的父级添加CSS样式overflow:hidden
给浮动元素的父级添加CSS样式overflow:hidden，为父级开启BFC。overflow属性规定，当内容溢出元素框时隐藏溢出的内容，解决高度塌陷的问题，但有时会影响元素的样式。
4.使用伪类清除浮动
在浮动元素后（父级元素中）添加一个带有clear:both属性的没有内容的块元素（可以是div、br等元素）即可清除浮动。
方案一：在浮动元素下面创建一个div元素，设置clear:both，解决父级元素高度塌陷的问题。
HTML代码：
<body>
<div class="box">
<img src="img/BaiduMap.jpeg" />
<div class="block"></div>
</div>
</body>
CSS代码：
img{
float: left;
}
.box{
border: 10px solid #55AAFF;
}
.block{
clear: both;
}
方案二：伪类清除浮动——万能清除法
CSS伪元素用于向某些选择器设置特殊效果，CSS 伪元素有以下4类：
CSS伪元素:
| 属性 | 描述 |
|---|---|
| :first-letter | 向文本中第一个字母添加特殊样式 |
| :first-line | 向文本中首行添加特殊样式 |
| :before | 在元素之前添加内容 |
| :after | 在元素之后添加内容 |
利用伪元素:after解决高度塌陷问题，如下代码：
HTML代码：
<body>
<div class="box clearfix">
<img src="img/BaiduMap.jpeg" />
</div>
</body>
CSS代码：
img{
float: left;
}
.box{
border: 10px solid #55AAFF;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
这种方法知识将方案一中的div标签改用:after创建的伪元素，同样是clear:both清除浮动。但这种方法遵循了W3C标准中的结构、样式、行为三者分离的要求。
5、实战练习（导航栏布局）
翻篇，下文再作。 😁
872
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
