关于CSS浮动原理的探究

最新推荐文章于 2021-04-22 17:46:54 发布

原创最新推荐文章于 2021-04-22 17:46:54 发布 · 783 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css #css浮动

web前端同时被 2 个专栏收录

42 篇文章

订阅专栏

css

6 篇文章

订阅专栏

本篇主要讲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>