CSS 中的 float、BFC、position 和 inline-block

CSS 中有时候需要一些特殊布局，用正常流做不出来的效果。这时我们就可以使用破坏流和保护流的那些 CSS 属性来实现这些效果。

float

float 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

float最初的设计目的是为了实现文字环绕效果，主要指的就是文字环绕图片显示的效果。所以就导致我们用它实现一些复杂的布局时问题一大堆。所以能不用float布局就不用。

float主要有 3 个属性值none, left和right。

当一个元素浮动时它具有以下特性：

包裹性 - 浮动元素会包裹它的子元素（浮动元素子元素 100x100，则浮动元素也是 100x100）
自适应 - 如果浮动元素子元素有一堆文字时，它的最终宽度为它的父级宽度。
块状话并格式化上下文 - float的属性值不为none，则其display计算值就是block 或者table
破坏文档流 - 会让父元素的高度塌陷
没有margin合并

float还有一个特性是行框盒子和浮动元素的不可重叠，正常定位状态下只会跟随浮动元素，而不会发生重叠。

<div>
  <img src="http://">
</div>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
<style>
div {padding-top: 10px; background: #ccc;}
img { width: 100px; float: left;}
</style>
复制代码

我们可以看到p和img重叠了，但是p中的行框盒子则是跟随浮动元素。

流体布局

float可以很方便的实现多栏布局。

<div class='page'>
  <div class="float">
    <p>float</p>
  </div>
  <div class="a">
    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
  </div>
</div>
<style>
.float { float: left; width: 60px;background: green;}
.a { margin-left: 70px; background: red; }
</style>
复制代码

<div>
  <div class="l">left</div>
  <div class="r">right</div>
  <h1>title</h1>
</div>
<style>
.l { float: left; } 
.r { float: right; }
h1 { margin: 0 50px; text-align: center;}
</style>
复制代码

清除浮动

clear属性是专门来处理float带来的高度塌陷等问题的。它指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear属性适用于浮动和非浮动元素。

它一共有 4 个值，none，left，right和both。

其中left和right是没什么作用的，因为在要使用left和right的情况下都可以使用both替换。

clear属性是让自身不能和前面的浮动元素相邻，它对后面的元素是不管的，left和right是不能同时存在的。

clear属性只有块级元素才有效的，所以我们用::after伪类时都要将它的display设置为block。

.clear:after {
    content: '';
    display: block;
    clear: both;
}
复制代码

clear其实并没有清除浮动而是让自己不和float元素在一行显示。

<div class="page">
    <img src="https://">
    文字文字文字文字文字文字
</div>
<div>
    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</div>
<style>
.page:after {
    content: '';
    display: table;
    clear: both;
}
.page img {
    float:left;
    width: 100px;
}
.page + div {
    margin-top: -2px;
}
</style>
复制代码

可以看到虽然使用了clear，但是clear后面的元素任有可能受float的影响。

BFC

块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视化 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

BFC 就像结界，它会形成一个封闭的空间，里面的子元素不会影响到外面的元素，所以 BFC 也可以用来清除浮动。

在以下情况下会触发 BFC：

根元素或包含根元素的元素
浮动元素（元素的float不是none）
position的值不为relative和static
overflow值不为visible的块元素
display的值为table-cell、table-caption和inline-block中的任何一个
弹性元素和网格元素

流体布局

BFC 可以实现更健壮、更智能的自适应布局。

<div>
    <div></div>
    <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</div>
<style>
div > div {
  width: 50px;
  height: 50px;
  float: left;
  background: red;
}

p { overflow: hidden; }
</style>
复制代码

普通流体元素在设置了overflow:hidden后，会自动填满容器中除了浮动元素以外的剩余空间，形成自适应布局效果。

overflow

overflow是最适合清除浮动影响的元素，而不是clear。但是它的本职工作还是裁剪。它是overflow-x和overflow-y的简写属性。

overflow裁剪是沿着border内边缘裁剪的。

<div>
  <p>文字文字文字文字文字文字文字文字文字文字文字文字</p>
</div>
<style>
div {
  border: 10px solid;
  padding: 10px;
  overflow: hidden;
}
p {
  white-space: nowrap;
}
</style>
复制代码

它常用属性有：

visible 默认值。内容不会被修剪，会呈现在元素框之外
hidden 内容会被修剪，并且其余内容不可见
scroll 内容会被修剪，浏览器会显示滚动条以便查看其余内容，滚动条区域一直在
auto 由浏览器定夺，如果内容被修剪，就会显示滚动条

`overflow-x` 和 `overflow-y`

overflow-x和overflow-y属性中的一个值设置为visible而另外一个设置为scroll、auto或hidden，则visible的样式表现会如同auto。

也就是说永远不可能实现一个方向溢出剪裁或滚动，另一方向内容溢出显示的效果。

滚动条

HTML 中只有两个标签默认可以产生滚动条，html和textarea，因为它们的overflow不是visible。

滚动栏占据宽度的特性最大的问题就是页面加载的时候水平居中的布局可能会产生晃动，因为窗体默认是没有滚动条的，而 HTML 内容是自上而下加载的，就会发生一开始没有滚动条，后来突然出现滚动条的情况，此时页面的可用宽度发生变化，水平居中重新计算，导致页面发生晃动。

这里有一个防止晃动的小技巧。

html {
    overflow-y: scroll; /* for IE8 */
}
:root {
    overflow-y: auto;
    overflow-x: hidden;
}
:root body {
    position: absolute;
}
body {
    width: 100vw;
    overflow: hidden;
}
复制代码

对于支持-webkit-前缀的浏览器，我们可以用以下伪类自定义滚动条。

::-webkit-scrollbar 整体部分
::-webkit-scrollbar-button 两端按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层轨道
::-webkit-scrollbar-thumb 滚动滑块
::-webkit-scrollbar-corner 边角

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,.3);
  border-radius: 10px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 10px;
}
复制代码

文字溢出

CSS 中有很多属性要想生效都必须要有其他 CSS 属性配合。比如文字溢出显示...。

.ell {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    /* 这 3 个声明缺一不可 */
}

/* 多行文字省略，无需依赖 overflow */
.ell2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
复制代码

锚点定位

一般实现锚点定位有两种方法，一种是使用a的href和name属性，如：

<a href="#1">Title ></a>
<a name="1">Title</a>
复制代码

还有一种是使用a的href和其他元素的id属性。

<a href="#1">Title ></a>
<h2 id="1">Title</h2>
复制代码

它的原理是当我们点击一个链接，改变了地址栏的 hash 值，而且这个 hash 值可以在页面中找到对应的元素，并且是非隐藏状态，否则不会发生定位行为。

我们也可以使用一个简单的#来实现返回顶部功能，它可以将页面是定位到顶部。

锚点定位行为的发生，本质上是通过改变容器滚动高度或者宽度来实现的。水平和垂直方向一样，一般发生垂直滚动的多。

锚点定位也可以发生在普通的容器元素上，而且定位行为的发生是由内而外的。由内而外指的是，普通元素和窗体同时可滚动的时候，会由内而外触发所有可滚动窗体的锚点定位行为。

<div>
  <div class="overflow">
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <h2 id="1">Title</h2>
  </div>
  <a href="#1">title ></a>
  <div style="height: 500px;"></div>
</div>
<style>
.overflow {
  overflow: hidden;
  height: 2em;
  background: #ccc;
}
</style>
复制代码

我们发现overflow滚动到了h2元素位置（虽然没有滚动条），页面的滚动条也滚动到了可以显示h2元素的位子。

用这个特点我们可以实现一个无需js的幻灯片效果。但是当我们点击切换按钮的时候，页面的滚动条也会自动滚动。

这时候我们就可以使用focus锚点定位，它是利用label的for属性和input的id属性。

<div>
    <div><input id="one">1</div>
    <div><input id="two">2</div>
    <div><input id="three">3</div>
</div>
<div>
    <label for="one">1</label>
    <label for="two">2</label>
    <label for="three">3</label>
</div>
复制代码

除了点击按钮切换，我们还可以使用tab键切换。

position

position属性用于指定一个元素在文档中的定位方式。top，right，bottom和left属性则决定了该元素的最终位置。

position一共有 5 个值：

static 正常的布局行为，即元素在文档常规流中当前的布局位置。
relative 元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置
absolute 脱离正常文档流，通过指定元素相对于最近的非static定位祖先元素的偏移，来确定元素位置
fixed 和absolute类似，但是它是相对于屏幕视口的位置来指定元素位置。
sticky 盒位置根据正常流计算，然后相对于该元素在流中的 flow root（BFC）和最近的块级祖先元素定位。在所有情况下，该元素定位均不对后续元素造成影响。

定位元素的类型主要有：

相对定位元素 - 是计算后位置属性为relative的元素。
绝对定位元素 - 是计算后位置属性为absolute或fixed的元素。
粘性定位元素 - 是计算后位置属性为sticky的元素。

absolute

absolute定位和overflow的裁剪类似，它的定位是相对于祖先定位元素的padding box的。

absolute相对于最近的position不为static的祖先元素定位，如果没有的话，就像对于html定位。

当一个元素设置了absolute时候，它的float属性是无效的。

absolute和float类似它们有几个共同点：

当元素设置了position后也会发生块状化，display的计算值就是block或table。
absolute会破坏正常的流来实现自己的特性表现，但本身还是受普通的流体元素布局。
absolute也可以 BFC
absolute也具有包裹性

无依赖定位

无依赖定位定位指的是，absolute定位，不依赖left, right, top, bottom和设置父元素为relative，来实现元素定位。

absolute定位元素的位置和没有设置absolute时的位置有关。所以我们可以通过调整元素的margin来调整元素的无依赖定位。

absolute 与 overflow

如果overflow不是定位元素，同时绝对定位元素和overflow容器之间也没有定位元素，则overflow无法对absolute元素进行剪裁。

<div style="overflow: hidden;">
    <img src="a.jpg" style="position: absolute;">
    <!-- 不会被剪裁 -->
</div>


<div style="overflow: hidden; position: relative;">
    <img src="a.jpg" style="position: absolute;">
    <!-- 被剪裁 -->
</div>

<div style="overflow: hidden;">
    <div style="position: relative;">
        <img src="a.jpg" style="position: absolute;">
        <!-- 被剪裁 -->
    </div>
</div>
复制代码

如果overflow的属性值不是hidden而是auto，即使绝对定位元素高宽比overflow元素高宽还要大，也都不会出现滚动条。

流体特性

当absolute元素的left/top/right/bottom属性都设置的时候，absolute元素才真正变成绝对定位元素。它会格式化元素的宽度和高度。

.box {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
}
复制代码

如果box父定位元素是html的话，它的宽和高会随着浏览器窗口大小变化而变化。

当绝对定位元素处于流体状态的时候，各个盒模型相关属性的解析和普通流体元素都是一模一样的，并且可以使用margin:auto让绝对定位元素保持居中。

绝对定位元素的margin:auto规则和普通流体元素的一样：

如果一侧定值，一侧auto，auto为剩余空间大小；
如果两侧均是auto，则平分剩余空间。

.box {
  width: 300px; height: 200px;
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  margin: auto;
  background: red;
}
复制代码

这行代码就可以让box水平垂直居中。

relative

我们一般用relative来限制absolute定位。让它相对于设置了relative的祖先容器定位。

relative是相当于自己当前的位置定位，一般情况下它不会影响到周围的元素。

当relative同时设置了left和right或top和bottom时，它不会和absolute一样格式化宽高，而是根据文档流的方向，一个有效而另一个会无效。

fixed

fixed定位的包含块只有一个html根元素，fixed和absolute一样也可使用无依赖定位。

sticky

粘性定位，就好像是relative和fixed的结合体。元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。

sticky有以下特点：

sticky的父级元素的overflow只能是visible，否则会没有效果。
同一个父容器中的sticky元素，如果定位值相等，则会重叠；如果属于不同父元素，则会挤开原来的元素，形成依次占位的效果。

inline-block

inline-block是display的一个属性值，它可以让元素和行内元素一样在一行显示，又可以和块级元素一样设置宽高。

空隙

使用inline-block有点小问题，那就是inline-block元素间有空格或是换行产生了间隙。

<style>
<div></div>
<div></div>
div {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
}
</style>
复制代码

空格相当于字符，那么我们可以使用font-size: 0;去除它们之间的空隙。

除了font-size我们还可以使用letter-spacing，它用来设置字符之间的空隙宽度。我们可以设置word-spacing: -1em;来去除inline-block之间的空隙。

我们还可以使用word-spacing，它用来设置单词间距，它和letter-spacing相似，我们设置它为负值来去除空隙。

YUI 3 CSS Grids 是这样去除inline-block之间的空隙的。

.yui3-g {
    letter-spacing: -0.31em; /* webkit */
    *letter-spacing: normal; /* IE < 8 */
    word-spacing: -0.43em; /* IE < 8 && gecko */
}

.yui3-u {
    display: inline-block;
    zoom: 1; *display: inline; /* IE < 8 */
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
}
复制代码

CSS 中的 float、BFC、position 和 inline-block

float

流体布局

清除浮动

BFC

流体布局

overflow

`overflow-x` 和 `overflow-y`

滚动条

文字溢出

锚点定位

position

absolute

无依赖定位

absolute 与 overflow

流体特性

relative

fixed

sticky

inline-block

空隙

推荐深入理解css中的position定位和z-index属性

CSS布局之浮动(float)和定位(position)属性的区别

css中position:absolute和relative的知识点

多个元素的inline-block能否呈现出和Table中的td一样的宽度均分？_html/css_WEB-ITnose

多个元素的inline-block能否呈现出和Table中的td一样的宽度均分？_html/css_WEB-ITnose

CSS中display属性：block、inline和inline-block的区别_html/css_WEB-ITnose

关于CSS中的float和position_html/css_WEB-ITnose

CSS的position定位和float浮动

css中(display,float,position)的深入理解

详解CSS中display/float/position属性值的相互影响

CSS 中的 float、BFC、position 和 inline-block

float

流体布局

清除浮动

BFC

流体布局

overflow

overflow-x 和 overflow-y

滚动条

文字溢出

锚点定位

position

absolute

无依赖定位

absolute 与 overflow

流体特性

relative

fixed

sticky

inline-block

空隙

推荐深入理解css中的position定位和z-index属性

CSS布局之浮动(float)和定位(position)属性的区别

css中position:absolute和relative的知识点

多个元素的inline-block能否呈现出和Table中的td一样的宽度均分？_html/css_WEB-ITnose

多个元素的inline-block能否呈现出和Table中的td一样的宽度均分？_html/css_WEB-ITnose

CSS中display属性：block、inline和inline-block的区别_html/css_WEB-ITnose

关于CSS中的float和position_html/css_WEB-ITnose

CSS的position定位和float浮动

css中(display,float,position)的深入理解

详解CSS中display/float/position属性值的相互影响

`overflow-x` 和 `overflow-y`