css之高度塌陷及其解决方法------浅谈清除浮动的多种方式（clearfix）

以码平川

已于 2022-03-06 01:15:37 修改

阅读量226

点赞数 1

分类专栏： CSS学习文章标签： vscode javascript node.js

于 2022-03-06 01:14:57 首次发布

原文链接：https://www.cnblogs.com/gaoht/p/9150176.html

版权

CSS学习专栏收录该内容

5 篇文章 1 订阅

订阅专栏

浅谈清除浮动的多种方式（clearfix）

1.0 什么是浮动?是否脱离文档流?

1.1 普通定位static(默认方式)

普通流定位，又称为文档流定位，是页面元素的默认定位方式

页面中的块级元素：按照从上到下的方式逐个排列

页面中的行内元素：按照从左到右的方式逐个排列

但是如何让多个块级元素在一行内显示?
这里就引出了浮动定位

1.2 浮动定位float

float属性取值为 left/right

脱离文档流

1.3 相对定位 relative

元素会相对于它原来的位置偏移某个距离，改变元素位置后，元素原本的空间依然会被保留
语法
属性：position
取值：relative
配合着偏移属性(top/right/bottom/left)实现位置的改变

1.4 绝对定位 absolute

如果元素被设置为绝对定位的话，将具备以下几个特征

脱离文档流-不占据页面空间
通过偏移属性固定元素位置
相对于最近的已定位的祖先元素实现位置固定
如果没有已定位祖先元素，那么就相对于最初的包含块(body,html)去实现位置的固定
语法
==属性：==position
==取值：==absolute
配合着偏移属性(top/right/bottom/left)实现位置的固定

1.5 固定定位fixed

将元素固定在页面的某个位置处，不会随着滚动条而发生位置移动
语法
属性：position
取值：fixed
配合着偏移属性(top/right/bottom/left)实现位置的固定

2.0 浮动效果

2.1 浮动之后会怎样?

浮动定位元素会被排除在文档流之外-脱离文档流(不占据页面空间),其余的元素要上前补位
浮动元素会停靠在父元素的左边或右边，或停靠在其他已浮动元素的边缘上(元素只能在当前所在行浮动)
浮动元素依然位于父元素之内
浮动元素处理的问题-解决多个块级元素在一行内显示的问题

2.2 需要注意的问题

一行内，显示不下所有的已浮动元素时，最后一个将换行
元素一旦浮动起来之后，那么宽度将变成自适应(宽度由内容决定)
元素一旦浮动起来之后，那么就将变成块级元素,尤其对行内元素，影响最大
1. 块级元素:允许修改尺寸
2. 行内元素:不允许修改尺寸
文本，行内元素，行内块元素时采用环绕的方式来排列的，是不会被浮动元素压在底下的，会巧妙的避开浮动元素

2.3 浮动之后会有什么样的影响

由于浮动元素会脱离文档流，所以导致不占据页面空间，所以会对父元素高度带来一定影响。如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0（高度塌陷）

3.0 如何清除浮动

3.1 直接设置父元素的高度

直接设置父元素的高度
优势：极其简单
弊端：必须要知道父元素高度是多少

3.2 父元素中追加空子元素

在父元素中，追加空子元素，并设置其clear属性为both
clear是css中专用于清除浮动的属性
作用：清除当前元素前面的元素浮动所带来的影响
取值：

none 默认值，不做任何清除浮动的操作
left 清除前面元素左浮动带来的影响
right 清除前面元素右浮动带来的影响
both 清除前面元素所有浮动带来的影响
优势：代码量少容易掌握简单易懂
弊端：会添加许多无意义的空标签，有违结构与表现的分离，不便于后期的维护

3.3 设置父元素浮动

设置父元素浮动
优势：简单，代码量少，没有结构和语义化问题
弊端：对后续元素会有影响

3.4 为父元素设置overflow属性

为父元素设置overflow属性
取值：hidden 或 auto
优势：简单，代码量少
弊端：如果有内容要溢出显示(弹出菜单)，也会被一同隐藏

3.5 父元素设置display:table

父元素设置display:table
优势：不影响结构与表现的分离，语义化正确，代码量少
弊端：盒模型属性已经改变，会造成其他问题

3.6 使用内容生成的方式清除浮动

使用内容生成的方式清除浮动

1 .clearfix:after {
2    content:""; 
3    display: block; 
4    clear:both; 
5 }

:after 选择器向选定的元素之后插入内容
content:""; 生成内容为空
display: block; 生成的元素以块级元素显示,
clear:both; 清除前面元素浮动带来的影响
相对于空标签闭合浮动的方法
优势：不破坏文档结构，没有副作用
弊端：代码量多

3.7 .cf:before,.cf:after

1 .cf:before,.cf:after {
2    content:"";
3    display:table;
4 }
5 .cf:after { clear:both; }

优势：不破坏文档结构，没有副作用
弊端：代码量多
注意：display:table本身无法触发BFC，但是它会产生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以触发BFC，简单说就是，触发块级格式化上下文的是匿名框，而不是display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的（后面会说到BFC）。

CSS2.1 表格模型中的元素，可能不会全部包含在除HTML之外的文档语言中。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。
所有的表格元素将会自动在自身周围生成所需的匿名table对象，使其符合table/inline-table、table-row、table- cell的三层嵌套关系。

3.8 为什么margin边距重叠

为什么会margin边距重叠？
overflow:hidden, 语义应该是溢出:隐藏，按道理说，子元素浮动了，但依然是在父元素里的，而父元素高度塌陷，高度为0了，子元素应该算是溢出了，为什么没有隐藏，反而撑开了父元素的高度？
为什么display:table也能清除浮动，原理是什么？

要解释这些疑问，我们就要提到Formatting context
Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
最常见的Formatting context有Block fomatting context(简称BFC)和Inline formatting context(简称IFC)。
CSS2.1 中只有BFC和IFC, CSS3中还增加了GFC和FFC

4.0 BFC

4.1 什么是BFC

BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 block-level box，display属性为block, list-item, table的元素，会生成block-level box。并且参与block fomatting context。 inline-level box， display属性为inline, inline-block, inline-table的元素，会生成inline-level box。并且参与inline formatting context
BFC布局规则：
1、内部的Box会在垂直方向，按照从上到下的方式逐个排列。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3、每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4、BFC的区域不会与float box重叠。
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6、计算BFC的高度时，浮动元素的高度也参与计算

4.2 触发BFC的条件

根元素
float （left，right）
overflow 除了visible 以外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block)
position（absolute，fixed）

<style>
   .top{
    width:100px;
    height:100px;
    background:red;
    margin:50px;
   }
   .bottom{
    width:100px;
    height:100px;
    background:blue;
    margin:20px;
   }
</style>
<body>
    <div class="top">上</div>
    <div class="bottom">下</div>
</body>

<style>
   .top{
    width:100px;
    height:100px;
    background:red;
    float:left;
   }
   .bottom{
    width:200px;
    height:200px;
    background:blue;
    overflow:hidden;
   }
</style>
<body>
    <div class="top"></div>
    <div class="bottom"></div>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BFC</title>
    <style>
   p{
    width:100px;
    height:100px;
    background:red;
    float:left;
   }
   div{
    width:200px;
    border:1px solid blue;
    overflow: hidden;
   }
</style>
<body>
    <div>
       <p></p>
       <div>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae fuga amet, fugiat totam eaque quas rem id blanditiis cum nemo harum? Totam quae enim voluptas, dolor ratione fuga neque aliquam!
       </div>
    </div>
</body>
</html>

以码平川

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css之高度塌陷及其解决方法------浅谈清除浮动的多种方式（clearfix）

浅谈清除浮动的多种方式（clearfix）1.0 什么是浮动?是否脱离文档流?1.1 普通定位static(默认方式)普通流定位，又称为文档流定位，是页面元素的默认定位方式 页面中的块级元素：按照从上到下的方式逐个排列 页面中的行内元素：按照从左到右的方式逐个排列 但是如何让多个块级元素在一行内显示?这里就引出了浮动定位 1.2 浮动定位floatfloat属性取值为 left/right脱离文档流1.3 相对定位 relative元素会相对于它原
复制链接

扫一扫