CSS页面布局之浮动/定位 _CSS

文章插图
css提供了三种传统布局方式：

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

网页布局准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动；定位则是让盒子自由地在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子。
1. 标准流（普通流/文档流）所谓标准流，就是标签按照规定好默认方式排列

块级元素会独占一行，从上向下顺序排列
【常见块元素：div、hr、p、h1~h6、ul、ol、dl、form、table】

行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
【常见行内元素：span、a、i、em等】

2. 浮动为什么需要浮动：可以让多个块级元素在一行内排列显示
什么是浮动：
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含快或另一个浮动框的边缘【所谓浮动指的就是使元素脱离原来的文本流，在父元素中浮动起来。】
【CSS页面布局之浮动/定位】语法：选择器{ float : 属性值; }
属性值：

none：元素不浮动（默认值）
left：元素向左浮动
right：元素向右浮动

特点：
（1）浮动元素会脱离标准流（脱标）
脱离标准普通流的控制，移动到指定位置，俗称脱标
浮动的盒子不在保留原来的位置
（2）浮动的元素会一行内显示并且元素顶部对齐
如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
（3）浮动的元素会具有行内块元素的特性
任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性
所以为了约束浮动元素位置，网页布局一般采取的策略是：
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页第一准则
浮动只会影响浮动盒子后面的标准流，不会影响前面的标准流
清除浮动：
场景：父盒子的高度不一定都要设置，比如新闻文章的网页，就不易写死网页盒子的高度，应该自适应高度，此时就要用到清除浮动了。
由于父盒子在很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。
理想状态：让子盒子撑开父盒子，有多少孩子，父盒子就有多高
浮动清除的本质：

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

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

left：不允许左侧有浮动元素（清除左侧浮动的影响）
right：不允许右侧有浮动元素（清除右侧浮动的影响）
both：同时清除左右两侧浮动的影响【常用】

清除浮动的方法：
（1）额外标签法，也称隔墙法，是W3C推荐的做法，但不推荐，虽然这样通俗易懂，书写方便，但是会添加许多无意义的标签，结构化较差
【在浮动元素末尾添加一个空的标签，例如<div style="clear:both"></div>或者其他标签，注意：这个方法要求这个新的空标签必须是块级元素，行内元素是不起作用的】
（2）父级添加overflow属性
可以给父级元素添加overflow属性，将其属性设置为hidden、auto或scroll
注意：这个方法代码非常简洁，但缺点是无法显示溢出的部分
（3）父级添加after伪元素
:after方式是额外标签法的升级版，也是给父元素添加
语法：
.clearfix:after{
content: "";
display: block;