CSS详细基础教程-05-浮动

目标

浮动

1. css提供三种传统网页布局方式（就是盒子如何进行排列顺序）

   • 普通流（标准流）

     标准流是最基本的布局方式

     标签按照规定好默认方式排列

     块级元素会独占一行，从上到下顺序排列

     行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行

   • 浮动

   • 定位

2. 为什么需要浮动

   改变元素标签默认排列方式

   浮动最典型的应用：可以让多个块级元素一行内排列显示

   网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

3. 什么是浮动

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

   语法： 选择器{ float：属性值；}

   

4. 浮动的特性

   • 脱标

     浮动元素会脱离标准流（浮）移动到指定位置（动），俗称脱标浮动的盒子不再保留原先的位置

   • 行显示

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

     注：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

   • 浮动元素会具有行内块元素特性

     任何元素都可以浮动，不管原先是什么样式的元素，添加浮动后具有行内块元素相似的特性

     注：

     如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动之后，它的大小根据内容来定

     浮动的盒子中间没有缝隙，是紧挨在一起的

     行内元素同理

   5. 浮动元素经常和标准流父级搭配使用

      先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则

为什么需要清除浮动

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子

清除浮动本质

• 清除浮动的本质是清除浮动元素造成的影响
• 如果父盒子本身有高度，则不需要清除浮动
• 清除浮动后，父级就会根据浮动的子盒子自动检测高度。父级有了高度就不会影响下面的标准流了

清除浮动

语法 ：选择器{clear：属性值；}

清除浮动的策略是：闭合浮动

额外标签法

也称隔墙法，会在浮动元素的末尾添加一个空的标签

• 优点：通俗易懂，书写方便

• 缺点：添加许多无意义的标签，结构化较差

  注：要求这个新的空标签必须是块级元素

父级添加overflow

给父级添加overflow属性，将其属性值设置为hidden、auto或者scroll

• 优点：代码简洁
• 缺点：无法显示被溢出的部分

：after伪元素法

：after方式是额外标签法的升级版，也是给父元素添加

• 优点：没有增加标签，结构更简单
• 缺点：照顾低版本浏览器
• 代表网站：百度、淘宝网、网易等

双伪元素清除浮动

也是给父元素添加

• 优点：代码更简洁
• 缺点：照顾低版本浏览器
• 代表网站：小米、腾讯等