CSS基础知识总结之浮动详解

前言

 day4主要讲述了一个重点，那就是浮动

 其中包含，什么是浮动？浮动的作用语法及浮动的清除等

---

1、CSS的三种布局机制
CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：

 1）普通流（标准流）

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

常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

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

常用元素：span、a、i、em等

 2）浮动

• 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示

 3）定位

•  将盒子固定在浏览器的某一个位置上

2、浮动

2.1为什么需要浮动？

 为了达到网页布局的需要，需要用浮动来完成对网页的布局，如将多个盒子（div）水平排列成一行、实现盒子的左右对齐效果等

2.2什么是浮动

 浮动指脱离控制，能够移动到制定的位置

2.3浮动的语法

选择器 { float: 属性值; }

2.4浮动的属性

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

2.5浮动元素与父盒子的关系

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

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

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

•  浮动的，那么当前盒子会与前一个盒子的顶部对齐；
•  普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。
•  一般情况下，父盒子中的一个子盒子浮动了，其他子盒子也应该浮动

3、清除浮动（特别重要）

3.1为什么要清除浮动

 父盒子一般不设置高度，因为设置高度后子盒子会撑开父盒子，浮动元素不占有位置，但会对排版产生影响，清除浮动的本质就是为了解决父级元素因为子级浮动引起内部高度为0 的问题

3.2清除浮动的方法

 1）通过clear清除

• 语法

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

• 属性

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

 2）父级添加overflow属性方法

可以给父级添加： overflow为 hidden| auto| scroll 

 完！欢迎评论区留言