CSS之 浮动，清除浮动，书写规范

CSS 布局的三种机制

css 提供了三种机制来设置盒子的摆放位置，分别是普通流、浮动和定位；

• 普通流：块级元素会独占一行，从上至下；行内元素会按照顺序，从左至右，碰到边缘自动换行；
• 浮动：让盒子从普通流浮动起来，主要作用让多个块级元素一行显示；
• 定位：让盒子定在浏览器的某一个位置 -- css 离不开定位，特别是后面的 js 特效。

为什么需要浮动

因为一些网页布局要求，因为标准流不能满足我们的需要了，因此需要浮动来完成网页布局；

什么是浮动

概念：元素的浮动是指设置了浮动属性的元素

• 脱离了标准流的控制；
• 移动到了指定的位置。

作用：

• 让多个盒子并排一列，使得浮动成为布局的主要手段；
• 可以实现盒子左右对齐等等；
• 浮动最早用来控制图片，实现文字环绕的效果。

语法：

选择器 {float: 属性值;}

特性

• float 属性会让盒子漂浮在标准流的上面，所以第二个标准流的盒子跑到浮动盒子的下面；
• 把自己原来的位置留给下面标准流的盒子，不占有原来的位置；脱标
• 任何元素都可以浮动，浮动元素会生成一个块级框，不论它本身是什么元素，这个块级框的特性与行内块极其相似；
• 浮动元素互相紧贴在一起，但是如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行显示

float 的应用

浮动是脱标的，会影响下面的盒子，所以实际工作中，不会随意的使用浮动，而是经常给浮动的元素添加一个标准流的父级元素，这样最大化的减少了对其他标准流的影响。

浮动元素与父盒子的关系

• 子盒子的浮动参照父盒子对齐；
• 不会与父盒子的边框重叠，也不会超过父盒子的内边距。

浮动元素与兄弟盒子的关系

在一个父级盒子中，如果前一个兄弟是

• 浮动的，那么当前盒子会与前一个盒子的顶部对齐
• 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方

在一个父级盒子中，如果下一个兄弟是

• 浮动的，则按照标准流从上至下排序；

注意：浮动元素只会影响当前或者后面的标准流盒子，不会影响前面的标准流；

清除浮动

为什么清除浮动

因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父盒子的高度为零，就影响了下面标准流的盒子；

清空浮动的本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题，清除浮动后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流；

清除浮动的方法

选择器: {clear: 属性值;}

实际工作中，几乎只用 clear: both;

额外标签法（隔墙法）

是 W3C 推荐的做法是通过在浮动元素末尾添加一个空的标签例如，<div style="clear: both;"></div>，或则其他标签 br 等亦可；

• 优点：通俗易懂，书写方便
• 缺点：添加许多无意义的标签，结构化较差

父级添加 overflow 属性方法

/* 任意一个都可以实现 */
选择器 {overflow: hidden | auto | scroll;}

• 优点：代码简洁
• 缺点：内容增多时容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

使用 :after 伪元素清除浮动

:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了；给需要清除浮动的父元素添加

.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  /* IE6-7 专有 */
  *zoom: 1;
}

• 优点：符合闭合浮动思想，结构语义化清晰；
• 缺点：由于IE6-7不支持 :after，使用 zoom: 1 触发 hasLayout

使用双伪元素清除浮动

.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  /* IE6-7 专有 */
  *zoom: 1;
}

CSS 书写顺序

建议遵循以下顺序

1. 布局定位属性：display，position，float，clear，visibility，overflow （建议display 第一个写）
2. 自身属性：width，height，margin，padding，border，background
3. 文本属性：color，font，text-decoration，text-align，vertical-align，white-space，break-word
4. 其他属性（css3）：content，cursor，border-dadius，box-shadow，text-shadow，background:linear-gradient...

.jdc {
    display: block;
    position: relative;
    folat: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 10px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px
}

CSS之 浮动，清除浮动，书写规范

原文：https://www.cnblogs.com/article-record/p/12313045.html