05-浮动(Float)

一、概念认知

网页布局的核心，就是用CSS来摆放盒子位置。

如何把盒子摆放到合适的位置？

一般不外乎标准流、浮动、定位

二、标准流

标准流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序,比如块级元素会独占一行，行内元素会按顺序依次前后排列,大部分页面遵循该布局。

三、浮动

| 1. 基础概念 |

浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。后来用浮动特性来进行页面布局

| 2. 什么是浮动？ |

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中对应位置的过程。

浮动的目的:让多个块级元素能够在同一行上显示

在CSS中，通过float属性来定义浮动，其语法格式是:

image

| 3. 浮动特性 |

特性1：浮动的元素总是找离它最近的父级元素对齐；但是不会超出内边距的范围。

image

特性2：浮动的元素排列位置，跟上一个块级元素有关

如果上一个元素是标准流，则该浮动元素的顶部会和上一个元素的底部对齐

image

如果上一个元素有浮动，则该浮动元素顶部会和上一个元素的顶部对齐

image

特性3：一个父盒子里面的子盒子如果需要一行对齐，只要其中一个子级有浮动，那么其它子级都需要浮动，这样才能一行对齐显示。

| 5. 清除浮动 |

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题；只要把浮动的盒子圈到里面，让父盒子闭合出口和入口不让它们出来影响其他元素。

清除浮动终极解决方法:
.clearfix:before, .clearfix:after { 
     content:"";
     display:table;  
}
.clearfix:after {
     clear:both;
}
.clearfix {
     *zoom:1;
}

| 4. 总结 |

① 浮动会脱离标准流，不会占位置，但会影响标准流;

② 浮动的目的就是为了让多个块级元素能够在同一行上显示;
③ 元素添加浮动后，元素会具有行内块级标签的特性。元素的宽高完全取决于定义的宽高或者默认的内容多少。

语义化记忆口诀:

浮：加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。
漏：加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏 给了标准流的盒子。
特：特别注意，首先浮动的盒子需要和标准流的父级搭配使用， 其次特别要注意注意浮动可以使元素显示模式体现为行内块级标签特性。

喜欢的关注下公众号哦,每天都有新的博文推送哦

wechat.jpg