带你彻底了解CSS浮动（文字整理版）

最新推荐文章于 2022-12-16 16:37:21 发布

weixin_33883178

最新推荐文章于 2022-12-16 16:37:21 发布

阅读量1k

点赞数 1

原文链接：https://segmentfault.com/a/1190000012739764

版权

谢老板（谢然）最近在segmentfault讲堂上开了一个视频课程《带你彻底掌握CSS浮动》，因为视频比较长（69分钟），不方便回顾，我将之做了一个整理，并从我自己理解的角度进行了阐述，以做记录。

页面布局是CSS的一个重点应用，例如：
图片描述

而实现页面布局主要应用到两种方法，一种是CSS浮动，一种是Flexbox（IE9以上），本文主要讲的是CSS浮动，下一篇文章将阐述Flexbox。

浮动元素

什么是浮动元素：浮动元素同时处于常规流内和流外的元素。其中块级元素认为浮动元素不存在，而浮动元素会影响行内元素的布局，浮动元素会通过影响行内元素间接影响了包含块的布局。

常规流：页面上从左往右，从上往下排列的元素流，就是常规流
脱离常规流：绝对定位，fixed定位的元素有自己固定的位置，脱离了常规流
包含块：一个元素离它最近的块级元素是它的包含块

下面详细描述以上的内容，举个?：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<style>
.border {
  border: 2px solid;
}

.common-div {
  width: 160px;
  height: 50px;
  background-color: red;
}

.float-red {
  width: 100px;
  height: 50px;
  background-color: #fcc;
  float: left;
}

.float-blue {
  width: 100px;
  height: 50px;
  background-color: #09c;
  float: left;
}
</style>
<body>
    <div class="border">
        <div class="float-red"></div>
        <div class="common-div"></div>
        <div class="float-blue"></div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</body>
</html>

上面这段代码显示的样子如下：
图片描述

块级元素认为浮动元素不存在：红色的块级元素没有受到粉色浮动元素的影响，还展示在左上角的位置，但是被粉色元素盖住了左边的部分
浮动元素会影响行内元素：文字部分被蓝色浮动元素影响，空出了蓝色浮动元素的部分
浮动元素会间接影响了包含块的布局：浮动元素影响了文字部分吗，使之多出了一行，文字部分撑高了最外面的border框，所以间接影响了包含块的布局。

其中，浮动元素的摆放会遵循如下的规则：

尽量靠上
尽量靠左
尽量一个挨着一个
不能超出包含块，除非元素比包含块更宽
不能超过所在行的最高点
不能超过它前面浮动元素的最高点
行内元素绕着浮动元素摆放：左浮动元素的右边和右浮动元素的左边会出浮动元素

应用

浮动元素并不能撑起包含块，这和我们的预期并不相符。通过以下的办法可以将包含块撑开，称之为 闭合浮动

图片描述

闭合浮动的方法：

BFC: 1) 包含块设置overflow:hidden 或者 2)包含块设置display:table-cell/table/flex...

BFC：块级格式化上下文。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的块级元素如何布局，并且与这个区域外部毫不相干。
只要 符合以下的条件就是BFC:
1) 根元素
2) float属性不为none
3) position为absolute或fixed
4) display为inline-block, table-cell, table-caption, flex, inline-flex
5) overflow不为visible

相应的背景文档可以参阅：《BFC的神奇原理》

伪元素：

.clearfix::after {
    content: '';
    display: block;
    clear: both;    
}

clear:both;意味着块级元素的左边和右边都不能有浮动元素。在包含块的末尾建立了一个内容为空的伪元素，并设置clear:both，使这个元素位于所有的浮动元素之后，从而撑开了包含块的高。

包含块自己也浮动

这个方法也是w3c使用的方法。不过，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消除不必要的标记。

相应的背景文档：《W3C CSS浮动》

结语

以上就是谢老板在视频中的内容，希望帮助到大家。

weixin_33883178

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
带你彻底了解CSS浮动（文字整理版）

谢老板（谢然）最近在segmentfault讲堂上开了一个视频课程《带你彻底掌握CSS浮动》，因为视频比较长（69分钟），不方便回顾，我将之做了一个整理，并从我自己理解的角度进行了阐述，以做记录。页面布局是CSS的一个重点应用，例如：而实现页面布局主要应用到两种方法，一种是CSS浮动，一种是Flexbox（IE9以上），本文主要讲的是...
复制链接

扫一扫