关于CSS浮动原理的探究

来源：互联网发布：一句一句学古兰经软件编辑：程序博客网时间：2024/06/04 11:47

本篇主要讲css浮动的原理和css浮动带来的一些问题的探究，主要参考了W3School以及相关博客，再谈一谈自己的理解。

在谈CSS浮动原理前，先讲CSS浮动的两大原则：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框的排列可以认为浮动框不存在一样

CSS float属性

在CSS中，float属性实现元素框的浮动
float: left 表示元素框向左浮动
float: right 表示元素框向右浮动
float: none 默认值，表示元素框不浮动，按照标准流排列

块级框的浮动

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

这里写图片描述

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

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

这里写图片描述

行内元素的浮动

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。具体效果如下图：

这里写图片描述

在这里有一个问题，为了展示这个问题，我写了一小段代码：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>float</title></head><style type="text/css">img{    width: 100px;    height: 100px;    float: left;}p{    border: 1px solid black;}</style><body><img src="/Users/chuancey/Downloads/smg.jpeg"/><p>让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码.这种情况下，出现了一个问题。因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。：</p></body></html>

运行结果如下：

这里写图片描述

我们可以看见，如果按照块级元素浮动理解的话，图片浮动后不占标准流的空间，应该是图片会和一部分文字重叠从而遮挡住文字，但事实上为什么没有重叠呢？

脱离文档流，也就是将元素从标准流的布局中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

浮动，会以某种方式将浮动元素从文档的标准流中删除，注意是某种方式删除，而这种方式会留下的它的影响力。

需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但 盒子内的文本 依然会为这个元素让出位置。而对于使用绝对定位脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

阅读全文

0 0