CSS浮动其实很简单（css浮动其实很简单吗）

25-03-02 12

在本文中，您将会了解到关于CSS浮动其实很简单的新资讯，同时我们还将为您解释css浮动其实很简单吗的相关在本文中，我们将带你探索CSS浮动其实很简单的奥秘，分析css浮动其实很简单吗的特点，并给出一些

在本文中，您将会了解到关于CSS浮动其实很简单的新资讯，同时我们还将为您解释css浮动其实很简单吗的相关在本文中，我们将带你探索CSS浮动其实很简单的奥秘，分析css浮动其实很简单吗的特点，并给出一些关于CSS Sticky 其实很简单、CSS浮动与浮动清除(BFC)简单教程、css浮动是什么意思？css浮动的原理以及css清除浮动的方法（附代码）、dns 被劫持怎么办，解决方法其实很简单的实用技巧。

本文目录一览：

CSS浮动其实很简单（css浮动其实很简单吗）
CSS Sticky 其实很简单
CSS浮动与浮动清除(BFC)简单教程
css浮动是什么意思？css浮动的原理以及css清除浮动的方法（附代码）
dns 被劫持怎么办，解决方法其实很简单

CSS浮动其实很简单（css浮动其实很简单吗）

总结

以上是小编为你收集整理的CSS浮动其实很简单全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

CSS Sticky 其实很简单

为什么要写这篇文章

Sticky 也不是新知识点了，写这篇文章的原因是由于最近在实现效果的过程中，发现我对 Sticky 的理解有偏差，代码执行结果不如预期。决定写篇文章重新学习一次。

什么是 Sticky

Sticky （MDN 翻译成粘性效果）是 CSS 属性 position 中的一个可选值。跟我们用得比较多的 static, fixed，relative，absolute 一样，用来描述元素的定位方式。

从效果上看，Sticky 像是混合体，页面滑动到“临界点”之前表现为 relative, 到达“临界点”时表现为 fixed。

如何使用

使用 CSS Sticky 只需要两个条件。

position: sticky;
top: 0; // right/bottom/left 任一有效值，甚至可以为负像素值
复制代码

top：0 意思是当元素滑动到距离视口 0px 时再继续滑动，元素吸顶。可以在这里看效果（试试看修改 top 值）

对比 JS 的实现方案

没有 CSS Sticky 之前，类似的效果都是使用 JS 实现。大致步骤如下：

监听滚动事件，计算目标元素距离视口的距离。
距离不满足条件时，按兵不动。
距离满足条件时，创建占位元素，修改目标元素定位方式为 fixed。

window.addEventListener(''scroll'', () => {
    const rect = elem.getBoundingClientRect();
    // 计算目标元素和视口的距离
})
复制代码

在 npm 上搜 sticky 关键字，也有很多优秀的包可以使用。以 react-sticky 为例，满足条件时会创建 placeholder 元素（防止页面抖动），同时让 header 定位为 fixed。

右边是 Chrome Dev-Tools 的 layers 面板，蓝色部分为生成的 placeholder。

两种方案的火焰图对比（为了放大效果，我把 cpu 调慢了 6 倍）

CSS 方案

使用 CSS Sticky，工作都交给 GPU 了，不占用 JS 主线程的资源，在移动端上异常流畅。

React Sticky

由于需要在 scroll event 回调中不断调用 getBoundingClientRect，而 getBoundingClientRect 又会触发页面重排重绘，稍不留神就掉帧卡顿。仅仅为了实现这个效果（页面上没有其他内容）大动干戈性价比很低。

结论是：实现 Sticky 效果，优先选择 CSS Sticky

理解上的偏差

1. 只在 Containing Block 内有效。

修改例子，用一个 div 把 Sticky Header 包裹起来，发现 Sticky 效果失效了！！！

  ...
  <div class="wrapper">
    <header>Sticky Header</header> </div> ... 复制代码

根据文档，Sticky 效果只在 Containing Block 内有效，Containing Block 滑出屏幕时，Stickey Element 也跟着滑走。

修改 wrapper 的高度，看效果。

.wrapper {
  height: 100px;
  background-color: #e6e6e6; } 复制代码

多个 Sticky Element 放在一块就有了前一个被后一个顶出去的特效，实际上并不是真的被顶出去，而是 Containing Block 把它拖走。

代码看这里

2. Overflow 会影响 Sticky

修改例子中的代码，给 #root 加上 overflow: auto

#root {
  overflow: auto; 
}
复制代码

Sticky 效果再次丢失（overflow 设置为其他非 visible 的有效值也是同样效果。）

看了很多相关的文档，我的出来的结论是：

Sticky Element 的 offset 值是依据 nearest scrolling ancestor (距离最近的滚动祖先) 计算的，如果没有匹配上的祖先元素，则使用视口作为参照物。

问题就出在 overflow-x 或者 overflow-y 其中任一为非 visible 则认为是要找的目标元素，而在滚动窗口的过程中，Sticky Element 和它找到的目标祖先元素的 offset 值一直没有改变，所以 Sticky 不起作用。

对症下药，让滚动发生在被“误匹配”上的祖先元素内即可恢复 Sticky Effect。

#root {
  overflow: auto; 
  height: 100vh;
}
复制代码

兼容性

算上 prefixed ，当前 css sticky 手机端兼容性达到 94.14%，如果你所做的业务需要照顾剩下 5.86% 的用户，也可以使用 polyfill 或者 position: fixed 。

浮动

1. 什么是浮动

当元素的 float 属性不为 none 时就产生了浮动。

<p>float</p>

登录后复制

.float {
  float: left;
  width: 100px;
  height: 100px;
  background-color: #ddd;
}

登录后复制

2. 浮动的影响

浮动会使元素脱离文档流，具体表现为：

父元素高度塌陷，即不会包含浮动元素。
比如上面的代码就会表现为

父元素高度塌陷

文本环绕。

CSS浮动与浮动清除(BFC)简单教程

文本环绕效果

可以注意到这里.normal元素的宽度覆盖了.float元素，但是.float元素下是没有文本的，也就是说文本被“挤”出来了，这是因为它虽然会脱离文档流，但是不会脱离文本流。这个效果也是float属性的本意。其代码如下：

立即学习“前端免费学习笔记（深入）”；

<p>float</p>

正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素

登录后复制

body {
  background-color: #ccc;
}
.float {
  float: left;
  width: 100px;
  height: 100px;
  background-color: #ddd;
}
.normal {
  background-color: #fff;
}

登录后复制

浮动元素的外边距不会合并。
关于外边距合并的相关内容可以戳这里。

元素一旦浮动便会变成行内块元素，即 display: inline-block。

3. 浮动的应用

上面提到的文本环绕。

写一个三列布局，左右固定宽度，中间自适应。

  <p>left</p>
  <p>right</p>
  <p>自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素</p>

登录后复制

body {
  background-color: #ccc;
}
.float {
  float: left;
  width: 100px;
  height: 100px;
  background-color: #ddd;
}
.left {
  float: left;
}
.right {
  float: right;
}
.mid {
  height: 100px;
  background-color: #fff;
  margin: 200px; /*故意加上了上下 margin 值*/
}

登录后复制

这里我故意加上了上了 margin 值，可以看到效果：

CSS浮动与浮动清除(BFC)简单教程

三列布局

body 也随 .mid 的 margin 往下掉了，这点可以用前面介绍的外边距合并来解释。

ps：我第一次自己写这个三列布局的时候，html 是这样写的

  <p>left</p>
  <p>自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素</p>
  <p>right</p>

登录后复制

如上把中间自适应的元素写在中间，其实这样比较符合逻辑，但是如果这样写是行不通的，右边的元素会掉下来，因为 .mid 元素是块级元素，会占满整行，.left 不会掉下来是因为它本来就是脱离文文档流的浮动元素。

清除浮动

在子元素上清除

这里我只写不会产生无意义标签的方法。

浮动元素后面若有兄弟元素，则可以在给它的兄弟元素加上clear属性。
如文本环绕那一部分代码，给 .normal 加上 clear:left 或者 clear:both。clear 的具体用法这里不做过多赘述。
给要清除浮动的元素加上伪类或者伪元素。
```
.float::after {
  content: '''';
  display: block;
  visiability: hidden;
  height: 0;
  clear: both;
}
```
登录后复制
关于 ::after 的使用可以看 MDN 的文档。

在父元素上清除，即BFC

BFC（Block Formatting Context），即块级格式上下文，它的官方解释是：

浮动、绝对定位元素（position 为 absolute 或 fixed）、行内块元素 display:inline-block、表格单元格 display:table-cell、表格标题 display:table-caption 以及 overflow 属性值不为 visible 的元素（除了该值被传播到视点 viewport 的情况）将创建一个新的块级格式化上下文。

总结来说它要满足下列条件之一：

float 不为 none
position 不为 static 或 relative
display 为 table-cell、table-caption、inline-block、flex、inline-flex
overflow 不为 visible

只要给父元素加上以上任意一个属性满足条件，也就是给父元素加上 BFC 就能清除子元素的浮动。

以上就是CSS浮动与浮动清除(BFC)简单教程的详细内容，更多请关注php中文网其它相关文章！

css浮动是什么意思？css浮动的原理以及css清除浮动的方法（附代码）

css浮动是什么意思？所谓css浮动就是浮动元素会脱离文档的普通流,根据float的值向左或向右移动,直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块级元素表现得就像浮动元素不存在一样。接下来，本文讲给大家说一说css浮动的原理以及css清除浮动的方法。

浮动影响

浮动元素会造成父元素塌陷

当给元素设置float之后,元素脱离文档流,父元素没有设置height,造成塌陷。

<div>
    <div></div>
</div>
.super{
    border:1px solid red;
}

.sub{
  float: left;
  background: green;
  border: 1px solid yellow;
  width: 100px;
  height: 100px;
}

登录后复制

2345截图20180807163309.png

立即学习“前端免费学习笔记（深入）”；

浮动元素的左(右)外边界不能超出其父元素的左(右)内边界。

在不设置margin为负值和父元素还有剩余空间的情况下,浮动元素的外边界(margin)不会超出父元素的内边界(padding)。

<div>
    <div></div>
    <div></div>
</div> 
.super{
    margin: 0 auto;
    padding: 10px;
    border:1px solid yellow;
     width: 300px;
}

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

.sub1{
  float: left;
  background: pink;
  border: 1px solid green;
  width: 100px;
  height: 100px;
}

.sub2{
  float: right;
  background: pink;
  border: 1px solid green;
  width: 100px;
  height: 100px;
}

登录后复制

2345截图20180807163604.png

浮动元素不会重叠。

这个也是在margin不会为负值和父元素还有剩余空间的条件下适用的。
这个是我对《CSS权威指南》中浮动这一章节中规则二和规则三的理解,以下是原文。

2、The left (or right) outer edge of a floated element must be to the right (or left) of the right (left) outer edge of a left-floating (or right-floating) element that occurs earlier in the document’s source, unless the top of the later element is below the bottom of the former.

有道翻译：

2、浮动元素的左（或右）外缘必须位于右（左）的右（左）左侧浮动（或右浮动）元素的外边缘，该元素在文档的源代码中较早出现，除非后面的元素的顶部在下面

3.The right outer edge of a left-floating element may not be to the right of the left outer edge of any right-floating element to its right. The left outer edge of a right- floating element may not be to the left of the right outer edge of any left-floating element to its left.

有道翻译：

3、左浮动元素的右外缘可能不是右浮动元素的左外边缘的右侧。一个右浮动元素的左外边缘可能不在左边任何左浮动元素的右外缘的左边。

这两个规则是保证两个浮动元素不重叠的基础。

表现为当一个浮动元素往左(右)靠的时候,在这个元素左(右)边已经存在一个浮动元素,他们不会重叠,后来者紧挨着先来者排列。如果浮动元素们的总宽度已经超过父元素的宽度,浮动元素之间也不会重叠,依照HTML结构的顺序,从在一行排列不下的浮动元素开始会移动到下一行。

<div>
    <div></div>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    <div></div>
</div>

<div>
    <div>float:left</div>
    <div>float:right</div>
</div>
.super {
    float: left;
    margin: 10px;
    padding: 10px;
    border: 1px solid blue;
    width: 300px;
}

.super1 .sub1{
    float: left;
    background: pink;
    border: 1px solid red;
    width: 100px;
    height: 100px;
}

.super1 .sub2{
    float: left;
    background: pink;
    border: 1px solid red;
    width: 100px;
    height: 100px;
}

.super2 .sub1{
    float: left;
    background: pink;
    border: 1px solid red;
    width: 200px;
    height: 100px;
}

.super2 .sub2{
    float: right;
    background: pink;
    border: 1px solid red;
    width: 200px;
    height: 100px;
}

登录后复制

效果如下：

2345截图20180807164125.png

浮动元素的顶端不能比其父元素的内顶端更高,不能比之前出现的浮动元素顶端高。

这个规则也是在margin-top不为负值的情况下成立。

父元素的顶端会限制浮动元素,防止一直浮动到页面顶端。
对于下图右边的例子,sub2在sub1下面,sub1右边的空间已经不足以容纳sub2,但是足够容纳sub3,而sub3没有上浮,那是因为他的的顶端就不能超过sub2的顶端,这个例子足以印证浮动元素的顶端不能比之前出现的浮动元素顶端高。

<div>
    <div></div>
</div>

<div>
    <div>sub1</div>
    <div>sub2</div>
    <div>sub3</div>
</div>
.super {
    float: left;
    margin: 10px;
    padding: 10px;
    border: 1px solid blue;
    width: 320px;
}

.sub {
    background: pink;
    border: 1px solid red;
    height: 100px;
}

.sub0 {
    float: left;
    width: 100px;
}

.sub1 {
    float: left;
    width: 200px;
}

.sub2 {
    float: left;
    width: 150px;
}

.sub3{
    float: right;
    width: 50px;
}

登录后复制

效果如下：

2345截图20180807164252.png

清除浮动

清除浮动的目的是为了解决高度塌陷的问题,撑开浮动父元素。常用的一般有几种方法:

增加一个样式为clear:both的空标签

<p></p>

登录后复制

把上面这句标签放到浮动元素的父元素的最后。

原理:clear会在元素的margin-top之上增加一个清除区域(clearance),这个区域会在元素的margin-top上增加额外间隔,并且不允许浮动元素进入这个区域。

优点:方便,兼容性强。

缺点:多出许多无意义的标签,增加维护成本,而且稍不注意中间多了个空格会产生一段空白高度。

父元素设置浮动

优点:简单,代码少,浏览器支持好。
缺点:父级使用浮动之后,浮动造成的影响仍旧存在,并且不可能父级往上一级级都使用浮动。

使用overflow、zoom属性

.fix{
    overflow:hidden(auto、scroll); 
    zoom:1;
}

登录后复制

优点:代码简洁,兼容性好,不产生多余标签。

缺点:设置该fix类的标签的内容超出该标签的时候会被隐藏(或产生滚动条)。

父元素设置浮动

优点:简单,代码少,浏览器支持好。
缺点:父级使用浮动之后,浮动造成的影响仍旧存在,并且不可能父级往上一级级都使用浮动。

父元素设置position

原理:在position的值不为relative或static的情况下,会形成BFC。

这种方式在父元素原本就需要设置position为fixed或者absolute的时候可以优先采用。

优点:简单,代码少,浏览器支持好。
缺点:改变父元素布局,影响整体布局。

使用：after

.fix:after{
    display:block; 
    content:&#39;&#39;; 
    clear:both; 
}

登录后复制

原理类似添加新的标签然后设置clear:both;,但使用伪类的方法没有多余标签。

优点:代码简洁,兼容性好,不产生多余标签。

以上方法中,第一种增加一个样式为clear:both的空标签的方法不建议使用,会增加无意义标签,其他设置父元素浮动,改变父元素position、overflow的方法依情况而定,如果父元素本身就有这方面的样式需求,那很合适,如果没有的话还是采用最后一种伪元素的:after的方式最为常见。

CSS浮动其实很简单（css浮动其实很简单吗）