css 浮动的特点和浮动引起高度塌陷及浮动的清除

CSS浮动与BFC详解

最新推荐文章于 2024-11-23 21:02:04 发布

原创最新推荐文章于 2024-11-23 21:02:04 发布 · 635 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #浮动 #浮动清除 #BFC #高度塌陷

前端专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了CSS中浮动的概念及特点，包括元素如何通过浮动实现水平布局，并探讨了浮动可能导致的高度塌陷问题及其解决方案——BFC（块级格式化环境）。此外，还介绍了clear属性的作用。

1. 浮动的简介

通过浮动可以使一个元素向其父元素的左侧或右侧移动

使用float属性来设置于元素的浮动

none 默认值，元素不浮动
left 元素向左浮动
right 元素向右浮动

注意:

元素设置浮动以后，水平布局的等式便不需要强制成立
元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动

2. 浮动的特点

浮动元素会完全脱离文档流，不再占据文档流中的位置

设置浮动以后，元素会向父元素的左侧或右侧移动

浮动元素默认不会从父元素中移出

浮动元素向左或向右移动时，不会超过前边的浮动元素（先来后到的顺序）

浮动元素不会超过上边的浮动的兄弟元素，最多就是和它一样高

如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移

浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果

简单总结：

浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局
元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化

3. 脱离文档流的特点

块元素：

块元素不再独占页面的一行
脱离文档流以后，块元素的宽度和高度默认都被内容撑开

行内元素：

行内元素脱离文档流以后会，特点和块元素一样

4 .高度塌陷与BFC

高度塌陷

在浮动布局中，父元素的高度默认是被子元素撑开的

当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失

父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱

动画2021-41

所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！

4.2. BFC
BFC（Block Formatting Context）块级格式化环境

BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC
开启BFC该元素会变成一个独立的布局区域
元素开启BFC后的特点：

不会被浮动元素覆盖
父子元素外边距不会重叠
可以包含浮动的元素

设置overflow为非visible值：既没有覆盖元素，也保持了独占一方的特性（保持了宽度），与下方元素也保持了最初的间隙

常用的方式为元素设置overflow:hidden（overflow:auto也是ok的）开启其BFC，以使其可以包含浮动元素

overflow:scroll 会有滚动条，可能并不需要的，所以不太推荐

不过，这种方式也存在一定问题，如下，overflow并没有完全清除div2布局上受到的影响

总结

可以通过变成浮动元素，来防止自身被浮动元素覆盖（有点“以毒攻毒”那味了）
可以设置行内块，来防止自身及其他元素被浮动元素覆盖（如果说浮动是“独善其身”，那行内块就有点“兼济天下”的意思）
可以设置overflow属性，包含浮动元素（既“独善其身”，又“兼济天下”，但仍有缺陷）

5. clear

我们这里设计三个兄弟元素，对前两个元素进行float的浮动属性设置，看下效果

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <style type="text/css">
    .box1{
        width:200px;
        height:200px;
        background-color:orange;
        float:left;
    }

    .box2{
        width:300px;
        height:300px;
        background-color:green;
        float:right;
    }

    .box3{
        width:400px;
        height:400px;
        background-color:blue;
        clear:right;
    }
  </style>
  <div  class="box1">
    1111
  </div>
  <div  class="box2">
    22222222
  </div>
  <div  class="box3">
    3333333
  </div>
 </body>
</html>

动画2021-36