CSS中浮动的原理和规则

Posted 2023-05-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS中浮动的原理和规则相关的知识，希望对你有一定的参考价值。

任何元素 element 都可以被浮动。段落、div、list、tables,以及图像都可以被浮动，事实上即使是像 span 和 strong这样的行内置元素也可以很好地进行浮动。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

注意：

参考技术A

浮动都是相对于父层的定位，浮左或者浮右；

一旦使用了浮动，那么它就不会占用父层的空间，也就是会出现——父层高2px，内容却有几百px（只是举个例子，具体看情况而定），一般给父层加一个overflow: hidden就能搞定

使用浮动一般都是同级元素都会使用浮动，否则很容易出现覆盖，溢出等情况，这些情况虽然也能通过定位移动解决，但是对于响应式布局效果并不好，所以浮动一般都是针对——我的同级元素都是浮动的或者只有我一个

参考技术B css浮动和定位还有盒子模型，写几个案例理解就可以的啦，参考技术C float属性是CSS中常用的一个属性，在实际工作中使用的非常多，如果使用不当就会出现意料之外的效果。
CSS世界中的float属性是一个年代非常久远的属性，设置了float属性的元素会根据设置的属性值向左或者向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。设置了float属性的元素会从普通文档流中脱离，相当于不占据任何空间，所以文档中普通流中的元素表现的就像浮动元素不存在一样，因此，设置float属性的后会影响我们的页面布局。具体说来就是：让block元素无视float元素，让inline元素像流水一样围绕着float元素实现浮动布局。
float属性设计的初衷：仅仅是让文字像流水一样环绕浮动元素。

CSS布局模型之浮动模型（浮动的工作原理和清除浮动技巧？）

浮动的工作原理

浮动是让某元素脱离文档流，在浮动框之前和之后的非定位元素会当它不存在一样，可能沿着它的另一侧垂直流动，但都为其腾出空间，块级元素也不例外（被浮动元素占据了部分行空间的块级元素，仍然被看作是占据了一整行，只不过是被浮动元素占据的那部分空间无法利用罢了）。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止；如果当前线上的水平空间不足，它将逐行向下移动，直到有空间为止（所以浮动元素不会影响页面上方布局）。任何元素都可以浮动，浮动元素会生成一个块级框（拥有块级元素特性，但不占整行），而不论它本身是何种元素。

另外因为浮动元素脱离了文档流，所有它无法为其文档流中的父级元素撑起高度。

清除浮动技巧

1、clear清除浮动

left 在左侧不允许浮动元素。

right在右侧不允许浮动元素。

both在左右两侧均不允许浮动元素。

none默认值。允许浮动元素出现在两侧。

在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样。例如：如果声明为左边清除，会使元素的上外边框边界刚好在左边浮动元素的下外边距边界之下。

要注意了，我们是通过在别的元素上清除浮动来实现撑开高度的，而不是在浮动元素上。浮动元素脱离了文档流，就算为其加了清除空间，也影响不了父元素的高度，最多能让其某侧不允许其他浮动元素。

clear 只能作用与块级元素或浮动元素，不过上面已经说了作用于浮动元素的弊端，所以一般都是使用块级元素。

全浏览器通用的clearfix方案，使用伪元素清除浮动【推荐】

// 引入了zoom以支持IE6/7

// 同时加入:before以解决现代浏览器上边距折叠的问题

.clearfix:before,

.clearfix:after {

display: table;

content: " ";

}

.clearfix:after {

clear: both;