CSS浮动

目录

1.浮动（float）

1.1传动网页布局的三种方式

1.2标准流（普通流/文档流）

1.3浮动（float）

为什么要浮动？

什么是浮动？

属性值

1.4浮动特性

1.5浮动的两个注意点

    1.浮动和标准流的父盒子搭配

    2.一个元素浮动了，理论上其余的兄弟元素也要浮动

1.6清除浮动

为什么要清除浮动

清除浮动

清除浮动的方法

---

1.浮动（float）

CSS样式的确定

1. 确定属性值（按照已书写的属性值来渲染网页）
2. 层叠规则
3. 使用继承
4. 使用默认值（对于仍未右值的属性使用默认值）

1.1传动网页布局的三种方式

网页布局的本质——用CSS来摆放盒子，把盒子摆放到相应位置。

CSS提供了三种传统(PC端)布局方式（简单说，就是盒子如何进行排列顺序）：

• 普通流（标准流）
• 浮动
• 定位

1.2标准流（普通流/文档流）

所谓标准流就是标签按照规定好的默认方式排列

1.块级元素独占一行，从上向下顺序排列（div、hr、p、h1~h6、ul、ol、dl、form、table等）

2.行内元素从左到右顺序排列，碰到父元素边缘自动换行（span、a、i、em等）

1.3浮动（float）

为什么要浮动？

网页布局第一准则：多个块级元素纵向排列用标准流，横向排列用浮动（浮动能保证横向盒子间无间隙）

什么是浮动？

float属性用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或另一个浮动框的边缘

属性值

float:none//元素不浮动，默认值

float:left//元素向左浮动

float:right

1.4浮动特性

    1.浮动元素会脱离标准流（脱标），不再保留原先的位置

         如果上一个盒子加了浮动，下一个盒子没加浮动，两个盒子会叠加在一起，并且第一个盒子位于上方覆盖掉第二个盒子

    2. 浮动元素会一行内显示并且元素顶部对齐

        如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列

    3. 浮动元素会有行内块元素的特性

        任何元素都可以浮动，不管原先是什么模式的元素，添加浮动后具有行内块元素相似的性质。如span标签设置的height和width可以起作用了。

1.5浮动的两个注意点

    1.浮动和标准流的父盒子搭配

       为了约束浮动元素的位置，我们网页布局一般采取的策略是先用标准流父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则

    2.一个元素浮动了，理论上其余的兄弟元素也要浮动

        一个盒子里面有多个盒子，如果第一个盒子没有浮动，第二个盒子浮动了，第二个盒子不会往上覆盖第一个盒子！！因为第一个盒子是标准流！所以第二个盒子只会放在第一个盒子的下一行

1.6清除浮动

为什么要清除浮动

很多父级盒子不方便给高度，但是子和字符东有不占用位置，最后父级盒子高度就会为0，就会影响下面的标准流盒子

清除浮动

清除浮动的本质就是清除浮动元素造成的影响

清除浮动的策略是闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

clear:left//不允许左侧有浮动（清除左侧浮动的影响）

clear:right

clear:both//同时清除两侧浮动的影响（几乎只会用到这个）

清除浮动的方法

     1. 额外标签法也称为隔墙法，是W3C推荐的做法

         在最后一个浮动的盒子后面再加一个标签（必须是块级元素，不能是行内元素），并且将新加的盒子清除浮动，clear:both。缺点：添加许多无意义的标签，结构化较差。

     2. 给父级添加overflow属性（溢出隐藏）

         将其overflow属性设置为hidden、auto或scroll。缺点：无法显示溢出部分。

     3. 给父级添加after属性（伪元素法）

        直接将下列代码复制到css样式中，然后在要清除浮动的盒子里加上clearfix标签。缺点：照顾低版本浏览器，因为IE6-7不支持：after，但是结构语义正确。

.clearfix:after{
  content:"";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}
/*为了兼容IE6、7*/
.clearfix{
  *zoom:1;
}

       4. 给父级添加双伪元素（双伪元素清除浮动）

           缺点：照顾低版本浏览器，因为IE6-7不支持：after，但是结构语义正确。代表网站：小米，腾讯。

.clearfix::before,
.clearfix::after {
   content: "";
   display: table;
}

.clearfix::after {
   clear: both;
}

.clearfix {
   *zoom: 1;
 }