CSS浮动清理方法及其原理总结

近来在做仿站练习的时候看到每个网站采用浮动清理的方法都各不相同,有的甚至同一个网页采用了不同的清理方法,是时候要在这方面做个总结了。

之所以要进行浮动清理,是因为浮动的元素会脱离普通流,导致父容器不能够包含浮动元素。

我们希望是这样:

结果是这样:

看了一下网上的方法,无非是两种原理:

1、利用clear属性进行清理

2、将父容器形成BFC

先说clear属性:

clear属性的意义就是禁止特定方向上存在浮动元素,例如clear: left就是不允许左方存在文档流之前浮动元素(注意,这里左边如果存在文档流之后的浮动元素是无法清理的)

根据CSS权威指南,具体的实现原理是通过引入清除区域,这个相当于加了一块看不见的框把定义clear属性的元素向下挤,直到元素指定方向刚好没有浮动元素,这样看起来包含框就把浮动框给包含了,实际上浮动框脱离文本流的性质没变,它们依然是“浮”在上面的。

具体应用:

1、在父容器结尾插入空标签<div style="clear: both;"></div>

这种方法简单粗暴,但不符合数据与表现分离原则,弃。

2、利用CSS伪元素:

1 .clearfix:after {
2   content: ".";
3   height: 0;
4   visibility: hidden;
5   display: block;
6   clear: both;
7 }

这一种方法跟上面的原理一样,只不过插入的动作改由CSS来完成。

通过将这个类添加到父容器当中,会在父容器的末尾增加了一个高度为0、具有清除属性的、不可见的块级元素。

再说BFC:

BFC能清理浮动主要运用的是它的布局规则:

  1. 内部的Box会在垂直方向,一个接一个地放置。
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  3. 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  4. BFC的区域不会与float box重叠。
  5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  6. 计算BFC的高度时,浮动元素也参与计算

浮动清理利用的主要是第六条规则,只要将父容器触发为BFC,就可以实现包含的效果。

那么触发BFC有哪几种方法?

  1. 根元素
  2. float属性不为none
  3. position为absolute或fixed
  4. display为inline-block, table-cell, table-caption, flex, inline-flex
  5. overflow不为visible

这里就解释了w3school上面通过对父容器添加overflow: auto;或overflow: hidden;能清理浮动的原因了。

其实就是将父容器触发为BFC,导致其计算高度时将浮动元素的高度计算在内。

明白了这个原理,可以知道对父容器添加position: absolute;或者其他满足触发BFC条件的也可以达到清除浮动的目的。

时间: 2024-10-14 17:04:28

CSS浮动清理方法及其原理总结的相关文章

css浮动布局,浮动原理,清除(闭合)浮动方法

css浮动 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相当于浮动起来一样,浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘 3.浮动的生成:使用css属性float:left/right/none 左浮动/右浮动/不浮动(默认) 4.浮动的影响: 不会影响未浮动的块级元素布局,但是会影响内联元素的布局 浮动后的元素可以设置宽度和高度,

CSS布局模型 之 浮动模型(浮动的工作原理和清除浮动技巧?)

浮动的工作原理 浮动是让某元素脱离文档流,在浮动框之前和之后的非定位元素会当它不存在一样,可能沿着它的另一侧垂直流动,但都为其腾出空间,块级元素也不例外(被浮动元素占据了部分行空间的块级元素,仍然被看作是占据了一整行,只不过是被浮动元素占据的那部分空间无法利用罢了). 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止:如果当前线上的水平空间不足,它将逐行向下移动,直到有空间为止(所以浮动元素不会影响页面上方布局).任何元素都可以浮动,浮动元素会生成一个块级框(拥有块级

CSS浮动与定位

一 标准流 块级元素占据一行显示,行内元素在一行上显示   --   元素按照原来的显示方式显示 ---  标准流 二 浮动 1 浮动的作用与用法 float 设置元素是否浮动或者如何浮动 none 不浮动 left 左浮动 right 有浮动 2 浮动的特点 1 浮动的元素不占据原来在标准流中的位置  --   (脱离标准流) 2 浮动可以让块级元素在一行上显示,让行内元素可以设置宽高 --  本质上是实现了模式的转换 3 浮动的元素顶端对齐 3 清除浮动 浮动带来的影响: 所有的子盒子都浮动

css浮动和清除浮动

浮动存在的原因 在word排版中,文本可以环绕图片.在css中,想要实现文字环绕的效果,只能借助于float,没有其他的替代方式.在实际中,文档的布局经常会使用浮动. float属性 float属性,默认为none,也就是标准流通常的情况.如果将float的属性的值设置为left或right,元素就会向其父元素的左侧或右侧紧靠. inherit表示从父元素继承float属性的值. clear属性 clear 属性定义了元素的哪边上不允许出现浮动元素.在 CSS1 和 CSS2 中,这是通过自动为

(转)CSS 浮动 -css中,文档流是什么?

原文链接:http://www.cnblogs.com/jiqing9006/archive/2012/07/30/2615231.html 普通流就是正常的文档流,在HTML里面的写法就是从上到下,从左到右的排版布局. 例: <div id=”01”></div><div id=”02”></div><div></div> 很显然这是最普通的文档流,从左到右,一个挨一个按照顺序01先,02其次,03最后排列. 一旦给其中的某个DIV

CSS浮动的3个特性(高手绕行)

1.  浮动元素会脱离正常的文档流,按照其外边距指定的位置相对于它的上一个块级元素(或父元素)显示: 代码示例: 1 <!DOCTYPE HTML > 2 <html> 3 <head> 4 <meta charset='utf-8'/> 5 <title>浮动元素的性质</title> 6 <style type="text/css"> 7 *{ 8 margin:0; 9 padding:0; 10

css浮动(folat),清除浮动(clear)

css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右浮动 html文档流:自窗体自上而下分成一行一行,并在没行中从左到右的顺序排放元素. 通过例子来解释浮动 1.页面上有两个块元素,每个块元素独占一行 2.我们希望他们能并排显示,这是就可以使用float,我们先给红色的div加float:left,发现两个是在一行了,但是他们重叠在了一起. 3.这是

验分享:CSS浮动(float,clear)通俗讲解

经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解. 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你. 小菜水平有限,本文仅仅是入门教程,不当之处请谅解! 本文以div元素布局为例. 教程开始: 首先要知道,div是块级元素

Css3之基础-8 Css 浮动(定位,浮动定位)

一.CSS 定位概述 定位概述 - 定位: 定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置 - 普通流定位 - 浮动定位 - 相对定位 - 绝对定位 普通流定位 - 页面中的块级元素框从上到下一个接一个地排列 - 每一个块级元素都会出现在一个新行中(比如<p>元素.<div>元素) - 元素框之间的垂直距离是由框的垂直外边距计算出来的 - 内联元素将在一行中从左到右排列水平布置 - 不需要从新行开始 - 可以使用水平内边距.边框和外边