CSS中float（浮动）和overflow：hidden内容的理解

最新推荐文章于 2024-05-05 20:21:31 发布

lakalu1999

最新推荐文章于 2024-05-05 20:21:31 发布

阅读量1.6k

点赞数 6

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_45289501/article/details/109136166

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

学习到CSSCSS中float（浮动）和overflow：hidden的内容，感觉比较抽象，对其原理不求甚解，经过一番学习，总算对这两个知识点有了一个大概的了解。

float

float的定义:float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
根据定义，我们可以知道，float是将元素变成一个块级框，并让它“浮起来”。
概念不大好理解，我们用div作为典型元素进行讲解。
首先要知道，，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的文档流。如下图：
在这里插入图片描述
很明显，一行只有一个盒子，所以我们设定浮动的意义就是，让盒子在一行显示多个，那就要让它“浮起来”，脱离自上而下的文档流。
我们对盒子2设定一个左浮动（float:left），如下图：

可以看到，盒子跑3上去了，因为盒子2“浮起来”了，盒子3占据了盒子2的文档流，我们用left:right让盒子2跑右边去，可以更直观地看到盒子3上去了，如下图：
在这里插入图片描述
接下来我们对盒子3也用float:left，可以看到，盒子3连接在盒子2的后面，也不在文档流当中了，但是盒子2还是在盒子1下面，如下图:

我们可以得到一个重要结论：
1）如果有一个浮动元素a，它的上一个元素是不浮动的（也就是在文档流中的元素），那么浮动元素a将会垂直对齐它的上一个元素，位置不发生改变；
2）如果浮动元素a的下一个元素也是浮动的，假设为b，那么浮动元素b将会跟在浮动元素a后面，排成一行，当然，如果浮动元素的width太大了，一行容纳不下，该元素就会被挤到下一行。

overflow：hidden

overflow定义：overflow 属性规定当内容溢出元素框时发生的事情。
一般而言，父级元素不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。那么会出现由于父级元素没有高度，下面的元素会顶上去，造成页面的塌陷的问题。如下图：
“盒子爸爸”有“盒子1”和“盒子2”和“盒子3”三个子元素，都是浮动元素，而“其他部分”不是浮动元素，由于页面塌陷，“其他部分”顶上去了，占据了“盒子爸爸”的空间，这样会导致元素显示不全。

<style>
    .container{
     background-color:yellow;
 }
    .a{ float:left;
    width: 400px;
    height: 100px;
    background-color: red;
}
    .b{float:left;
        width: 400px;
        height: 100px;
        background-color: blue;
    }
    .c{width: 100px;
        float:left;
        height: 200px;
        background-color: green;
    }
    .other{
        width: 200px;
        height: 100px;
        background-color:saddlebrown;
    }
</style>
<body>
<div class="container">盒子爸爸
    <div class="d a">盒子1</div>
    <div class="d b">盒子2</div>
    <div class="d c">盒子3</div>
</div>
<div class="other">其他部分</div>
</body>

在这里插入图片描述

因此，需要给父级加个overflow:hidden属性，这样父级的高度就随子级容器及子级内容的高度而自适应。
在父类上加overflow:hidden。

// An highlighted block
.container{
     overflow:hidden;
     background-color:yellow;
 }var foo = 'bar';

在这里插入图片描述
这样页面就不会塌陷啦。
所以，overflow:hidden的一个重要功能就是清除浮动。
以上是我对浮动（float）和overflow:hidden的粗浅理解，如果不对请指正，有新的心得体会会及时更新。

lakalu1999

关注

6
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS中float（浮动）和overflow：hidden内容的理解

学习到CSSCSS中float（浮动）和overflow：hidden的内容，感觉比较抽象，对其原理不求甚解，经过一番学习，总算对这两个知识点有了一个大概的了解。floatfloat的定义:float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下
复制链接

扫一扫