05 css浮动与定位

1. 浮动

网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？ 这就需要css的定位机制。

CSS的定位机制有3种：普通流（标准流）、浮动和定位。

1.1 普通流

普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列。按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。

1.2 浮动

浮动介绍

浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。后来发现浮动可以让任何盒子在一行排列，就开始利用浮动的特性进行布局。

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制（漂浮在空中，不占位置），移动到其父元素中指定位置的过程（不超过父元素内边距范围）。

在CSS中，通过float属性来定义浮动，其基本语法格式如下：

selector {
   
    float: 属性值；
}

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

浮动特性

浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。

1. 浮动首先创建包含块的概念（包裹）。浮动的元素总是找距离它最近的父级元素对齐，但是不会超出父元素内边距的范围。
2. 浮动元素的排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐（排列在一行，常用来布局）；如果上一个元素是标准流（占位置），则A元素的顶部会和上一个元素的底部对齐。（因此布局时，如果想让一个父盒子里面的子盒子排列在一行，就需要全部浮动）
3. 元素添加浮动后，元素会具有行内块元素的特性（排列在一行，但是中间无缝隙）。元素的大小完全取决于定义的大小或者默认的内容多少（靠内容撑开）。

注意：

1. 浮动的目的就是为了让多个块级元素同一行上显示。
2. 让多个块级元素排列在一行还可以将其转换为行内块元素，但是行内块元素之间默认是有缝隙的。（因此给元素添加浮动特性时，不需要转换为行内块元素。）

1.3 清除浮动

清除浮动原因

浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，因此会有很多的问题出现。所谓的清除浮动其实是清除浮动造成的影响，因为浮动的效果本身是不变的。

清除浮动本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。因为多数情况下父盒子不方便给高度，内部的子盒子还要浮动（脱标），此时父盒子就没有高度，会导致下方同级元素挤上来，影响布局。

这种情况下，父盒子没给高度，子盒子没有浮动（不脱标），子盒子会撑开父盒子高度。下方父盒子同级元素正常排列。

当子盒子浮动后，会浮在空中，父元素高度没被撑开又没给高度，高度就为0。此时，下方同级盒子就会挤上来占据父盒子原有位置，导致布局混乱。

清除浮动方法

把清除浮动叫做闭合浮动更好一些，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

在css中，clear属性用于清除浮动，语法如下：