[CSS学习笔记]浮动和高度塌陷

最新推荐文章于 2023-12-25 15:36:46 发布

魔法的可乐

最新推荐文章于 2023-12-25 15:36:46 发布

阅读量295

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_45369645/article/details/107852128

版权

浮动和高度塌陷

浮动float
高度塌陷

浮动float

CSS属性float设置容器的左侧或右侧的元素，使文本和内联元素环绕它。尽管仍保留了流的部分，但该元素已经脱离了文档流。

CSS Demo: float

float: none;

在这里插入图片描述

float: left;

在这里插入图片描述

float: right;

在这里插入图片描述

float属性值

left
元素必须浮动在其包含块的左侧。
right
元素必须浮在其包含块的右侧。
none
元素不得浮动。
inline-start
元素必须在其包含块的开始侧浮动。即在ltr（文本方向从左向右）的左侧，在rtl（文本方向从右向左）的右侧。
inline-end
元素必须在其包含块的末端浮动。即在ltr（文本方向从左向右）的右侧，在rtl（文本方向从右向左）的左侧。

例子：浮动元素如何定位

如上所述，当元素浮动时，它会从文档的正常流程中移除（尽管仍然是文档的一部分）。它会向左或向右移动，直到接触其包含框或另一个浮动元素的边缘。
在此示例中，有三个彩色正方形。两个向左浮动，一个向右浮动。请注意，第二个“左”方块位于第一个的右侧。其他正方形将继续向右堆叠，直到它们填充了包含的框，之后它们将环绕到下一行。

HTML

<section>
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="right">3</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Morbi tristique sapien ac erat tincidunt, sit amet dignissim
     lectus vulputate. Donec id iaculis velit. Aliquam vel
     malesuada erat. Praesent non magna ac massa aliquet tincidunt
     vel in massa. Phasellus feugiat est vel leo finibus congue.</p>
</section>

CSS

section {
  border: 1px solid blue;
  width: 100%;
  float: left;
}

div {
  margin: 5px;
  width: 50px;
  height: 150px;
}

.left {
  float: left;
  background: pink;
}

.right {
  float: right;
  background: cyan;
}

result
在这里插入图片描述

高度塌陷

在浮动布局中，父元素的高度默认被子元素撑开。当子元素浮动后，子元素会完全脱离文档流，导致父元素的高度缺失。父元素高度丢失后，其后的元素会自动上移，导致页面布局混乱，这就是高度塌陷。

高度塌陷的例子

<style>
    #div1{
        border: 5px aquamarine solid;
    }
    #div2{
        width: 100px;
        height: 100px;
        background-color:cornflowerblue;
    }
</style>
<body>
    <div id="div1">
        <div id="div2"></div>
    </div>
</body>

在这里插入图片描述
当为div2设置float:left后，出现了子元素无法撑起父元素高度的现象：

如何解决高度塌陷问题

BFC(Block Formatting Context) 块级格式化环境

BFC是CSS中一个隐含的属性，开启BFC使该元素变成一个独立的布局区域。
元素开启BFC后的特点：
1、开启BFC的元素不会被浮动元素所覆盖
2、开启BFC的元素子元素和父元素外边距不会重叠
3、开启BFC的元素可以包含浮动的子元素

开启BFC的部分方法:
1、设置元素的浮动（不推荐）
2、将元素设置为行内块元素（不推荐）
3、将元素的overflow属性设置为一个非visible的值
其他方法请参考MDN中的Block formatting context文档：BFC传送门

clear属性

作用：清除浮动元素对当前元素所产生的影响
可选值：left right both(both清除两侧最大影响)
原理：设置清除浮动后，浏览器会自动为元素添加一个上外边距，使位置不受影响

CSS Demo: clear

clear: none;

在这里插入图片描述

clear: left;

在这里插入图片描述

clear: right;

在这里插入图片描述

clear:both;//清除两侧最大影响

在这里插入图片描述

解决高度塌陷的好方案：after伪类与clear结合

修改刚才高度塌陷的例子：

<style>
    #div1{
        border: 5px aquamarine solid;
    }
    #div2{
        width: 100px;
        height: 100px;
        background-color:cornflowerblue;
        float:left;
    }
    #div1::after{
        content: '';
        display: block;
        clear: both;
    }
</style>
<body>
    <div id="div1">
        <div id="div2"></div>
    </div>
</body>

在这里插入图片描述

关于clearfix

使用clearfix可以同时解决父与子元素之间高度塌陷和外边距重叠的问题，相关代码如下：

.clearfix::before,.clearfix::after{
	content:'';
	display:table;
	clear:both;
}

在上述代码中，content:''和display:table起到解决外边距重叠的作用，具体实现可自行尝试；而content:''、display:table、clear:both解决高度塌陷问题。至于没有使用display:block的原因在于display:table能同时解决上述两个问题。
使用时只需要将clearfix添加到所需元素即可，例如：

<style>
    #div1{
        border: 5px aquamarine solid;
    }
    #div2{
        width: 100px;
        height: 100px;
        background-color:cornflowerblue;
        float:left;
    }
    /* #div1::after{
        content: '';
        display: block;
        clear: both;
    } */
    .clearfix::before,.clearfix::after{
	content:'';
	display:table;
	clear:both;
}
</style>
<body>
    <div id="div1" class="clearfix">
        <div id="div2"></div>
    </div>
</body>