浮动会导致什么结果?怎么清除浮动?

i_garfileo 发布于2019-08-02 14:27 / 1924人阅读

摘要：首先看一段代码原本想象的效果是这样子结果是这个样子为什么的高度为了呢是因为导致的高度折叠，即元素的上下底边重合，也就是出现高度为的情况这种情况为导致以下结果因为浮动脱离文档流导致高度为这时在后面添加一个自然是在下面但由于的高度为所

首先看一段代码:

HTML:

CSS:

.container, #div1, #div2 {
    border: 1px solid;
}

.container {
    width: 100%;
}

#div1 {
    float: left;
    width: 200px;
    height: 200px;
    background-color: blueviolet;
}

原本想象的效果是这样子:

结果是这个样子:

为什么div.container的高度为0了呢?是因为float导致的高度折叠，即元素的上下底边重合，也就是出现高度为0的情况.这种情况为导致以下结果:

因为#div1浮动,脱离文档流导致div.container高度为0,这时在div.container后面添加一个div.box自然是在div.container下面.但由于div.container的高度为0,所以出现的效果是#div1会覆盖div.box.

但怎么解决这个问题呢,第一种方法可以是这样:

CSS:

.container::before, .container::after {
    content: "";
    display: block;
    clear: both;
}

给div.container添加伪元素,让其清除左右浮动,便可解决这个问题,效果如下:

第二种方法可以给div.container添加overflow: hidden;

CSS:

.container {
    width: 100%;
    overflow: hidden;
}

为什么overflow: hidden可以清除浮动呢?其实是我们添加overflow时创建了BFC(块级格式化上下文).
一个BFC可以被显示触发,只需满足一下条件之一:

1.float 的值不为 none;
2.overflow 的值不为 visible;
3.position 的值为 fixed/absolute;
4.display 的值为 table-cell/table-caption/inline-block/flex/inline-flex.

在计算BFC高度时,浮动元素高度也参与计算,因此div.container在计算高度时也把#div1的高度计算在内,因此会出现这种"清除浮动"的效果,把#div1包含在内.

GPU云服务器云服务器清除浮动什么原因会导致云计算故障在html中怎么浮动 java左浮动怎么写

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53811.html

浮动会导致什么结果?怎么清除浮动?

摘要：首先看一段代码原本想象的效果是这样子结果是这个样子为什么的高度为了呢是因为导致的高度折叠，即元素的上下底边重合，也就是出现高度为的情况这种情况为导致以下结果因为浮动脱离文档流导致高度为这时在后面添加一个自然是在下面但由于的高度为所首先看一段代码: HTML: CSS: .container, #div1, #div2 { border: 1px so...

DevYK 2019-08-30 15:56 评论0 收藏0
你从来没了解过的CSS浮动 | Design Shack

摘要：另一种元素是内联元素，它们会与之前的内容保持显示在一行。即使图片是内联元素，它们也被它们的父块级元素列表项控制。当一行中多个元素被浮动，它们会产生同内联元素的流类似的效果。浮动元素不能高过前一行内联元素。浮动到底是做什么呢？他们是如何影响相关元素的盒模型的呢？浮动的元素与内联元素有什么不同呢？制定浮动元素的位置的具体规则是什么？clear属性是如何工作的，并且它的作用是什么？即使是...

XGBCCC 2019-08-02 16:13 评论0 收藏0
你从来没了解过的CSS浮动 | Design Shack

摘要：另一种元素是内联元素，它们会与之前的内容保持显示在一行。即使图片是内联元素，它们也被它们的父块级元素列表项控制。当一行中多个元素被浮动，它们会产生同内联元素的流类似的效果。浮动元素不能高过前一行内联元素。浮动到底是做什么呢？他们是如何影响相关元素的盒模型的呢？浮动的元素与内联元素有什么不同呢？制定浮动元素的位置的具体规则是什么？clear属性是如何工作的，并且它的作用是什么？即使是...

BicycleWarrior 2019-08-29 18:40 评论0 收藏0
[译]HTML&CSS Lesson5: 定位

摘要：浮动定位的其中一种方法就是使用属性。例如，是一个内联元素，它默认的值为和值是不生效的。然而，如果我们将这个内联元素设置为浮动，那么它的默认值会变成这时候和值就生效了。包裹元素就是将浮动元素置于父元素中，父元素作为容器会置于正常的文件流中。 CSS最大的用处之一就是可以将内容和元素定位到任何我们想要的位置，使我们的设计具有结构，使内容更加易懂。 CSS有好几种不同的定位属性，每种都有自己...

YorkChen 2019-08-01 17:39 评论0 收藏0
[译]HTML&CSS Lesson5: 定位

摘要：浮动定位的其中一种方法就是使用属性。例如，是一个内联元素，它默认的值为和值是不生效的。然而，如果我们将这个内联元素设置为浮动，那么它的默认值会变成这时候和值就生效了。包裹元素就是将浮动元素置于父元素中，父元素作为容器会置于正常的文件流中。 CSS最大的用处之一就是可以将内容和元素定位到任何我们想要的位置，使我们的设计具有结构，使内容更加易懂。 CSS有好几种不同的定位属性，每种都有自己...

_Dreams 2019-08-29 13:29 评论0 收藏0