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相似它们有几个共同点：

1. 当元素设置了position后也会发生块状化，display的计算值就是block或table。
2. absolute会破坏正常的流来实现本身的特性表现，但自己仍是受普通的流体元素布局。
3. absolute也能够 BFC
4. 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有如下特色：

1. sticky的父级元素的overflow只能是visible，不然会没有效果。
2. 同一个父容器中的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;
}
复制代码