浮动、BFC 规范、清除浮动的最佳实践

您所在的位置：网站首页 › 清除ul浮动的css › 浮动、BFC 规范、清除浮动的最佳实践

浮动、BFC 规范、清除浮动的最佳实践

#浮动、BFC 规范、清除浮动的最佳实践 | 来源: 网络整理| 查看: 265

# 浮动、BFC 规范、清除浮动的最佳实践

TIP

在讲 CSS 浮动之前，我们要现在了解下 CSS 布局有哪些实现机制

# 一、实现 CSS 布局的几种策略

网页布局的本质是：

用 CSS 来摆放盒子，把盒子摆放到页面对应的位置。在之前的章节我们已经详细介绍了盒子模型，那接下来我们就来学习，在 CSS 中提供了哪些摆放盒子的技术？

css 中提供了以下几种不同的 CSS 布局策略，来实现页面的布局。

正常布局流浮动布局定位布局表格布局（display: table;）响应式设计弹性布局网格布局多列布局

以上每种布局方式，都有自己的用途，也有各自己的优缺点，相互辅助。通过理解各个布局方法的设计理念，我们能够找到构建理想网页需要的布局方案。

# 二、正常布局流（Normal Flow)

正常布局流 (normal flow) 是指

在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。我们都知道，HTML 元素有块级元素和内联元素。所以更简单直白的理解，正常布局流就是规定了，在默认情况下块级元素和内联元素的排版方式。 # 1、正常布局流中，块级元素的排列方式

TIP

块级盒子会从包含块的顶部开始，按序垂直排列。同级盒子间的垂直距离会由“margin”属性决定。相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则 # 2、正常布局流中，内联元素排版方式

TIP

盒子会从包含块的顶部开始，按序水平排列。只有水平外边距（垂直方向无效）、边框和内边距会被保留。这些盒子可以以不同的方式在垂直方向对齐：可以底部对齐或顶部对其，或者按文字底部进行对齐

相关元素总结，在博客中，点击查看 👆

注意：

盒模型不仅仅指 div，所有 HTML 元素本质上都是一个盒子模型，并具有盒模型的结构和属性

深入研究 CSS 布局，官方文档地址：

深入 CSS 布局的不同方式，点击查看详细内容 👆 (opens new window) CSS 布局功能，点击查看详细内容 👆 (opens new window)

在正常布局流中，要实现块级元素在水平方向一行排列，那是没有办法实现的，但是接下来我们要讲到的浮动布局就可以轻松实现。

# 三、浮动布局

TIP

深入浅出浮动布局的工作原理和本质

# 1、浮动布局起源

最初

引入 float 属性是为了能让 web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边，

如下图的效果：

但 Web 开发人员很快意识到，任何东西都可以浮动，而不仅仅是图像，所以浮动的使用范围扩大了

# 2、浮动是如何工作的

TIP

把一个元素 “浮动”（float）起来，会改变该元素本身和在正常布局流（normal flow）中跟随它的其他元素的行为。这一元素会浮动到左侧或右侧，并且从正常布局流 (normal flow) 中移除，这时候其他的周围内容就会在这个被设置浮动 (float) 的元素周围环绕。

简单理解：

当元素添加了浮动后，元素就会脱离文档流，按照指定方向（左右）发生移动，遇到父级边界或者相邻的浮动元素就会停下来，同时会影响到他后面元素的排版行为。

文档流：文档中可显示对象在排列时所占用的位置/空间(在页面中占位置) 脱离文档流：元素相当于漂浮起来，不占据页面中的位置 # 3、浮动的本质和要点

TIP

浮动的本质功能：用来实现并排浮动使用要点：要浮动，并排的盒子都要设置浮动父盒子要有足够的宽度，否则子盒子会掉下去点击查看完整源代码 .box { width: 600px; height: 200px; border: 1px solid #000; } /* 要点：要浮动，都浮动父盒子要有足够的宽度，否则子盒子会掉下去 */ .box .c1 { width: 200px; height: 200px; background-color: skyblue; float: left; } .box .c2 { width: 200px; height: 200px; background-color: gold; float: left; } .box .c3 { width: 200px; height: 200px; background-color: pink; float: left; } 浮动 float: left; float: left; float: left;

# 4、如何产生浮动

TIP

给需要浮动的元素添加 float 属性，float 属性对应的值如下：

属性值 float ① none 默认值，元素不浮动② left 元素向左浮动③ right 元素向右浮动④ inherit 规定应该从父元素继承 float 属性的值。（一般不用，了解即可） # 四、元素浮动的特性

TIP

深入了解元素添加浮动后的 7 大特性

# 1、元素添加浮动后，脱离文档流

TIP

同时会影响其后面的元素，但不影响它前面的元素

点击查看完整源代码 .box { width: 300px; height: 200px; border: 2px solid red; } .box1 { width: 100px; height: 50px; background-color: khaki; } .box2 { width: 200px; height: 50px; background-color: rgb(133, 206, 235, 0.5); /* 给元素添加左浮动 */ /* float: left; */ } .box3 { width: 100px; height: 100px; background-color: pink; } 1 2 3 正常布局流中 box2(蓝色盒子浮动后效果) 正常布局流中，块级元素默认从上往下排列蓝色 div 加了浮动后，相当于漂浮起来，不占据页面空间，这时候蓝色盒子后面的粉色盒子的位置就会发生改变，移动到上面来，就出现如图，蓝色的盒子相当于漂浮在红色的上面。但黄色的盒子不受任何影响 # 2、如果父元素的宽度不够

TIP

子元素在放不下的情况下会换行显示

点击查看完整源代码 .main { width: 240px; height: 150px; background-color: khaki; } .box { width: 50px; height: 50px; background-color: skyblue; margin: 10px; float: left; } 框1 框2 框3 框4

# 3、浮动的顺序贴靠特性

TIP

子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找在前一个兄弟元素

点击查看完整源代码 .box { width: 300px; height: 200px; border: 1px solid #000; } /* 浮动的顺序贴靠特性: 子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找在前一个兄弟元素 */ .box .c1 { width: 200px; height: 100px; background-color: orange; float: left; } .box .c2 { width: 100px; height: 50px; background-color: skyblue; float: left; } .box .c3 { width: 100px; height: 50px; background-color: tomato; float: left; } 浮动的顺序贴靠特性

利用贴靠性布局案例：

# 4、元素浮动后，具有行内块级元素特性

TIP

浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流一律能够设置宽度和高度，即使它是 span 标签或 a 标签等等点击查看完整源代码 span { width: 100px; height: 30px; background-color: tomato; /* 只要设置了浮动的元素，不再区分块级元素和行内元素都能设置高度和宽度 */ float: left; margin-right: 10px; text-align: center; line-height: 30px; color: #fff; } 浮动的元素一定能设置宽高 1 2 3 4 5

右浮动

float: right; 即可设置右浮动实际工作中，右浮动没有左浮动用的多原理同左浮动 # 5、浮动的元素会造成父元素高度塌陷

TIP

当给子元素添加了浮动后，子元素相当于漂浮起来，不占据页面空间。这样就造成父级元素在没有设置高度时，高度塌陷问题。具体看如下案例：点击查看完整源代码 .main { width: 200px; border: 2px solid red; } .item { width: 100px; height: 100px; background-color: pink; /* 添加浮动的前后对比 */ float: left; } item 未设置浮动前效果 item 设置浮动后效果 "

如何解决父级高度塌陷问题，讲完浮动对文字的影响后，我们就会讲到。

# 6、浮动对文字的影响

TIP

常见的图片文字环绕效果，其实现方式主要是将图片左浮动或右浮动浮动后其相邻的文字，就会环绕图片排列点击查看完整源代码 .box { width: 200px; background-color: #ddd; padding: 10px; } .img { width: 80px; height: 80px; background-color: skyblue; float: left; margin: 10px; } 最初，引入float属性是为了能让 web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边

# 7、使用浮动实现网页布局

TIP

垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动每一个盒子都是独立存在，每个盒子中又是一个小天地，内部可以继续使用浮动

点击查看完整源代码 DOCTYPE html> 使用浮动实现网页布局 - arry老师 * { margin: 0; padding: 0; } /* topbar start */ .topbar { width: 100%; height: 40px; background-color: #666; } /* end topbar */ /* header start */ header { width: 1000px; height: 100px; margin: 20px auto 0; } header .logo { width: 200px; height: 100px; background-color: skyblue; float: left; } header .login { width: 200px; height: 30px; background-color: orange; float: right; } header .top-nav { width: 660px; height: 50px; background-color: tomato; float: right; margin-top: 20px; } /* end header */ /* main start */ main { width: 1000px; height: 500px; margin: 30px auto; } main aside.ad { width: 300px; height: 500px; background-color: rgb(190, 225, 239); float: left; } main article { width: 680px; height: 500px; float: right; } main article .banner { width: 680px; height: 380px; background-color: orange; } main article .pics { width: 680px; height: 100px; margin-top: 20px; } main article .pics ul { list-style: none; } main article .pics ul li { width: 160px; height: 100px; background-color: greenyellow; float: left; margin-right: 10px; } main article .pics ul li:last-child { width: 170px; margin-right: 0; } /* end main */ /* footer start */ footer { width: 1000px; height: 100px; background-color: gray; margin: 0 auto; } /* end footer */ # 五、BFC 规范和浏览器差异

TIP

BFC （Box Formatting Context ，块级格式上下文）是页面上的一个隔离的独立容器容器里的子元素不会影响到外面的元素，反之亦然

如：一个盒子不设置 height，当内容子元素都浮动时，无法撑起自身

原因是：这个盒子没有形成 BFC

# 1、创建 BFC

TIP

方法 1：float 的值不是 none 方法 2：position 的值不是 static 或者 relative 方法 3：display 的值是 inline-block、flex 或 inline-flex 方法 4：overflow：hidden; 点击查看完整源代码 DOCTYPE html> 创建BFC - arry老师 .box { width: 500px; border: 5px solid red; /* 方法1：float的值不是none 该方法可以实现效果，但没有意义，不可能随意给盒子设置浮动 */ /* float: left; */ /* 方法2：position的值不是static或者relative 该方法可以实现效果，但不靠谱 */ /* position: absolute; */ /* 方法3：display的值是 inline-block、flex 或 inline-flex 该方法可以实现效果，但，没有意义，可能随便改变盒子的为行内块，获取其他的 */ /* display: inline-block; */ /* display: flex; */ /* display: inline-flex; */ /* 方法4：overflow：hidden；该方法可以实现效果，但是，不能满足所有的场景 */ /* overflow: hidden; */ } .box .c1 { width: 200px; height: 200px; background-color: orange; float: left; } .box .c2 { width: 200px; height: 200px; background-color: skyblue; float: left; } 创建BFC BFC （Box Formatting Context ，块级格式上下文）是页面上的一个隔离的独立容器

溢出隐藏：overflow：hidden;

溢出盒子边框的内容将会被隐藏 overflow：hidden；是非常好用的让盒子形成 BFC 的方法 # 2、BFC 的其他作用

TIP

BFC 可以取消盒子 margin 塌陷 BFC 可以阻止元素被浮动元素覆盖点击查看完整源代码 p { width: 200px; height: 200px; background-color: orange; /* 垂直方向上下margin会重合距离依然是：50 */ margin: 50px; } /* BFC作用一：可以取消盒子margin塌陷添加overflow：hidden; 创建BFC */ div { overflow: hidden; } /* BFC作用二：可以阻止元素被浮动元素覆盖没有实际意义，实际开发不会这么用，只具有理论意义，要明白需要并排显示的盒子，要么都浮动，要么都不写，以下的写法是不合法规范的 */ .box1 { width: 300px; height: 300px; background-color: skyblue; float: left; } .box2 { width: 200px; height: 200px; background-color: tomato; /* float: left; */ overflow: hidden; } # 3、浏览器差异

TIP

IE6、7 浏览器使用 haslayout 机制和 BFC 规范略有差异比如：IE 浏览器可以使用 zoom:1 属性，让盒子拥有 layout 如果要制作兼容到 IE6、7 的网页时，尽量让网页布局变得简单，内部有浮动的盒子要设置 height 属性，规范编程，就没有问题 # 六、清除浮动

TIP

清除浮动：浮动一定要封闭到一个盒子中，否则就会对页面后续元素产生影响

# 1、清除浮动方法 1

TIP

让内部有浮动的父盒子形成 BFC，它就能关闭住内部的浮动。此时，最好的方法就是 overflow: hidden; 属性点击查看完整源代码 * { margin: 0; padding: 0; } div { /* 清除浮动方法1：让内部有浮动的父盒子形成BFC，它就能关闭住内部的浮动此时，最好的方法就是 overflow: hidden; 属性 */ overflow: hidden; margin-bottom: 10px; } p { width: 100px; height: 100px; background-color: orange; margin-right: 10px; float: left; }

# 2、清除浮动方法 2

TIP

给后面的父盒子设置 clear: both; 属性 clear 表示清除浮动对自己的影响，both 表示左右浮动都清除

该方法不推荐

# 3、清除浮动方法 3

TIP

使用 ::after伪元素给盒子添加最后一个子元素并且给 ::after 设置 clear:both;

强烈推荐使用，最佳实践（大厂都这么用）

点击查看完整源代码 * { margin: 0; padding: 0; } div { border: 2px solid red; margin-bottom: 20px; } /* 添加伪元素 ::after 匹配选中的元素的最后一个子元素 */ .clearfix::after { content: ""; clear: both; /* 转为块级元素 */ display: block; } p { width: 100px; height: 100px; background-color: orange; margin-right: 10px; float: left; }

# 4、清除浮动方法 4

TIP

在两个父盒子之间 "隔墙" 隔一个携带 clear: both;的盒子

不推荐

点击查看完整源代码 * { margin: 0; padding: 0; } div { border: 2px solid red; } p { width: 100px; height: 100px; background-color: orange; margin-right: 10px; float: left; } /* 清除浮动方法4：在两个父盒子之间 "隔墙" 隔一个携带 `clear: both;`的盒子 */ .cl { clear: both; } .h20 { height: 20px; }

# 七、浮动实战应用

TIP

浮动的元素一般都会在其外面套一个标准流父级搭配一起使用。这样就能约束浮动元素的位置，使其只能在父元素的盒子范围内容排列显示。 # 1、实现左右两列式布局

点击查看完整源代码 .box { width: 600px; background-color: khaki; padding: 10px; } .box .left { width: 200px; height: 200px; background-color: skyblue; float: left; } .box .right { width: 380px; height: 200px; background-color: pink; float: right; } /*清除浮动*/ .clearfix::after { display: block; content: ""; clear: both; } 左右 # 2、实现一行多列式布局

点击查看完整源代码 .box { width: 600px; background-color: khaki; padding: 10px; } .box .left { width: 150px; height: 200px; background-color: skyblue; float: left; } .box .middle { width: 280px; background-color: aquamarine; height: 200px; float: left; margin-left: 10px; } .box .right { width: 150px; height: 200px; background-color: pink; float: right; } /*清除浮动*/ .clearfix::after { display: block; content: ""; clear: both; } 左右右 # 3、三列式布局，中间自适应

点击查看完整源代码 body { margin: 0; } .box { width: 100%; background-color: khaki; padding: 10px; box-sizing: border-box; } .box .left { width: 150px; height: 200px; background-color: skyblue; float: left; } .box .middle { background-color: aquamarine; height: 200px; margin: 0px 160px; } .box .right { width: 150px; height: 200px; background-color: pink; float: right; } /*清除浮动*/ .clearfix::after { display: block; content: ""; clear: both; } 左中中 # 4、多行多列式布局

点击查看完整源代码 .container { width: 800px; background-color: skyblue; margin: 0px auto; padding: 5px; } .item { width: 190px; height: 200px; background-color: khaki; float: left; margin: 5px; } /*清除浮动*/ .clearfix::after { display: block; content: ""; clear: both; } 1 2 3 4 5 6 7 8 # 5、实现整站结构布局

点击查看完整源代码 body, ul { margin: 0; } ul { padding: 0; list-style: none; } .clearfix::after { display: block; content: ""; clear: both; } .top { height: 50px; background-color: skyblue; } .container { width: 1000px; margin: 10px auto; } /*header部分样式*/ .container .header .logo { width: 100px; height: 120px; background-color: pink; float: left; } .container .header .nav { width: 700px; float: right; } .nav .nav-top { width: 500px; height: 50px; background-color: turquoise; float: right; } .nav .nav-bottom { height: 60px; width: 100%; background-color: tomato; float: right; margin-top: 10px; } /*main-top部分样式*/ .main { margin-top: 20px; } .main-top .main-top-menu { width: 200px; height: 500px; background-color: lavender; float: left; } .main-top .main-top-content { width: 520px; height: 500px; float: left; margin-left: 15px; } .main-top .main-top-recommend { width: 250px; height: 500px; background-color: orange; float: right; } .main-top-content .top-content-banner { height: 300px; background-color: tomato; } .main-top-content .top-content-hot { height: 180px; margin-top: 20px; } .top-content-hot ul li { width: 120px; height: 180px; background-color: aquamarine; margin: 0px 5px; float: left; } .footer { height: 100px; background-color: #ddd; } 1 2 3 4 # 八、作业

根据课程进度完成以下针对性案例开发，开发过程要求：

利用 PS（Photoshop）与 PxCook 结合，在 PS 中的找到 PxCook-切图面板，选中想要切图的图层或者图层组，然后点击切图面板上的标记为切图按钮 -> 再导出到 PxCook 在 PxCook 中下载对应的切图素材即可获取当前案例中的开发素材开发过程中所需的尺寸在 PxCook 中量取

以上开发开发流程是用于个人训练从切图、量取尺寸，到具体的开发过程，包括平时自学中如果没有 PSD 源文件时，PxCook 是最佳的个人开发工具。因此现在阶段推荐使用这种方式来练习

在实际企业网页开发中（更多是团队协作开发，流程如下）

设计师设计好 UI 设计稿后 -> 会在 PS 中标记切图 -> 导出至蓝湖（国内企业用的多）中前端开发人员下载网页开发所需的素材 -> 在蓝湖中量取尺寸 -> 即可开发静态页面

我们把 CSS/CSS3 基础知识全部学习完之后，会有 3 大项目开发（PC 端，响应式，移动端）会按照企业真实团队协作的方式，用 3 个项目来完整的实践。

PSD 的源文件设计稿（联系助理老师获取即可）

具体操作步骤讲解，在钉钉群直播回放视频（第十二课：CSS 盒子模型）中可查阅

切记

学习阶段一定要按照以上的流程学习，提前熟悉工具和整个开发步骤，企业真实项目开发就是这样的流程

# 1、前端必会的 3 种 css 布局技术

点击查看完整版视频讲解 # 2、酷狗音乐热门榜单

点击查看完整版视频讲解 # 3、小米商城产品展示效果

点击查看完整版视频讲解上次更新时间: 6/8/2023, 9:23:17 PM

← CSS 三大特性：继承、层叠性、优先级 CSS 定位、层叠顺序、层叠上下文 →

大厂最新技术学习分享群

微信扫一扫进群，获取资料

【本文地址】

浮动、BFC 规范、清除浮动的最佳实践

浮动、BFC 规范、清除浮动的最佳实践

今日新闻

推荐新闻