CSS中文档流之普通流，浮动及定位、浮动特性及清除浮动的方式、定位模式，子绝父相搭配定位方式、z-index层级

文档流：

普通流（normal flow）：

字面意思是普通流或者标准流，也就是常说的文档流，指网页内标签正常是从上到下，从左到右排列的意思，css的定位机制有3种：普通流（标准流）、浮动、定位。

浮动：

是指使元素飘起来不完全脱离标准流的控制，绝对定位才是完全脱离标准流的，飘起来后不会再占原来的位置，浮动可以使块级元素在一行排列显示，float的值有：none默认值，元素不浮动、right元素向右浮动、left元素向左浮动。

 .box ul li {float:left;}

浮动特性：

1、浮动只存在于水平方向，浮动不能上对齐和下对齐，浮动属于内容content，所以是无法跨越padding和border的，要想跨越就会使用定位；

2、浮动找离自己最近的父级盒子对齐，浮动影响的是他的下面的盒子，自己浮动后会脱离文档流不占位，从而下面的盒子会到它原来的位置排列；

3、浮动可以让元素默认转换为类似行内块元素（float使元素显示模式隐藏转换，但是并非真实行内块，因为行内块元素中间默认有间隙，而float转换后的元素中间没有间隙）。

清除浮动：

主要是为了解决父级元素没有给高度，子级盒子浮动不占位引起的父级盒子高度为0的问题，清除浮动后，父级盒子自动检测高度，从而不会影响下面标准流盒子的布局。

清除浮动的方法有四种：

1、额外标签法（标签给clear属性）：

在最后一个浮动元素末尾添加一个空标签，并给这个标签添加clear:both;属性，添加属性的三种方式任选其一都可以，这里采用行内样式举例子，clear的属性值有left、right、both（推荐使用），此方法比较快捷，但是给页面增加了无意义标签，结构化较差。

 <style>.father {background-color: #ffaacf;}.son {width: 100px;height: 100px;background-color: #666666;float: left;}.son2 {width: 200px;height: 200px;background-color: #9bdf13;float:left;}.brother {height: 100px;background-color: #333333;}/*采用内联样式添加clear属性法.clear {clear: both;}*/</style><body><div class="father"><div class="son"></div><div class="son2"></div><div style="clear:both" class="clear"></div><!-- 添加空标签实现清除浮动属性法 --></div><div class="brother"></div></body>

2、父级标签添加overflow属性法：

给父级元素添加overflow属性同样可以实现清除浮动的效果，代码简洁，但是当页面的内容增多时，overflow属性不能使内容自动换行而隐藏，不能显示溢出的内容，overflow的值：hidden（溢出隐藏）、scroll（滚动条）页面会出现滚动条，不推荐使用、auto（自动）都可以清除浮动。

 <style>.father {background-color: #ffaacf;overflow: hidden;/*给父级标签添加overflow属性实现清除浮动*/}.son {width: 100px;height: 100px;background-color: #666666;float: left;}.son2 {width: 200px;height: 200px;background-color: #9bdf13;float:left;}.brother {height: 100px;background-color: #333333;}</style><body><div class="father"><div class="son"></div><div class="son2"></div></div><div class="brother"></div></body>

3、after伪元素兼zoom: 1;属性法：

after伪元素可以解决额外标签法中无意义的标签问题，伪元素实际还是本身，只是给了另一个身份，其具体方法是：先声明伪类并配置属性：{content: “”;display: block;height: 0;clear: both;visibility: hidden;}，后父级盒子调用；zoom: 1属性是解决兼容IE6~7问题的，属性前面加*的作用是告诉浏览器，只有遇到IE6~7浏览器才会执行此代码，其他浏览器不执行此代码，如

 <style>/* 给父级盒子声明伪类，类名可以直接使用father，如：.father:after {} */.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}.clearfix { /* 解决IE6~7之间存在的兼容问题,此属性可以直接写在.father {}中，省去一个类名的声明 */*zoom: 1;/* css hack 解决IE低版本浏览器兼容性*/}.father {background-color: #ffaacf;}.son {width: 100px;height: 100px;background-color: #666666;float: left;}.son2 {width: 200px;height: 200px;background-color: #9bdf13;float:left;}.brother {height: 100px;background-color: #333333;}</style><body><div class="father clearfix"><!--  父级标签调用伪类 --><div class="son"></div><div class="son2"></div></div><div class="brother"></div></body>

4、双伪元素法：

此方法和after伪元素法一样，只是采用双伪元素实现清除浮动效果，如：

 <style>/* 声明双伪类： */.clearfix:before,.clearfix:after {content: "";display: block;height: 0;}.clearfix:after {clear: both;}.clearfix { /* 解决IE6~7之间存在的兼容问题 */*zoom: 1;}.father {background-color: #ffaacf;}.son {width: 100px;height: 100px;background-color: #666666;float: left;}.son2 {width: 200px;height: 200px;background-color: #9bdf13;float:left;}.brother {height: 100px;background-color: #333333;}</style><body><div class="father clearfix"><!--  父级标签调用伪类 --><div class="son"></div><div class="son2"></div></div><div class="brother"></div></body>

定位（position）：

实际开发中，标准流和浮动不能满足我们布局的需求，此时使用定位就可以很好的实现布局效果。定位属性主要包括：定位模式和边偏移。

定位模式：
position的属性值：

绝对定位和固定定位会发生模式转换，最终会默认转换为inline-block行内块模式

边偏移属性：

子绝父相搭配定位方式：

子绝父相是实际开发中一种常见的定位搭配方式，子级用绝对定位，父级用相对定位。父级用相对定位的原因是自己占位，不会影响下面元素的布局，子级用绝对定位的原因是自己不占位，方便其他元素布局，如常见轮播图布局。

 /* 子绝父相定位代码展示： */<style>/* 实现btnleft 和 btnright位于topbox的两边居间，bottom盒子在top盒子上面： */* {margin: 0;padding: 0;}body {width: 600px;height: 500px;margin: 0 auto;}div {border: 1px solid yellowgreen;}.topbox,.bottom {width: 400px;height: 200px;background-color: #443366;position: relative;}.btnright~div {width: 98px;height: 160px;background-color: #666666;margin-top: 15px;float:left;}.bottom {background-color: #998866;}.btnleft,.btnleft+div {width: 50px;height: 50px;background-color: turquoise;position: absolute;top: 70px;}.btnleft+div {right: 0px;}</style><body><div class="topbox"><div class="btnleft"></div><div class="btnright"></div><div>页面一</div><div>页面二</div><div>页面三</div><div>页面四</div></div><div class="bottom"></div></body>

绝对定位的盒子水平、垂直居中算法：

普通盒子左右居中仅需margin：0 auto;即可，但是当给盒子给了定位或者浮动后，此方法失效，这时就只能使用算法两步进行居中定位：1:使用绝对定位给自己盒子left值为父级盒子宽度的50%（left：50%）2:使用margin-left值为自己盒子宽度的一半的负值，案例代码如下：

 <style>.box {border: 1px solid #552;width: 400px;height: 300px;position: relative;}.son {border: 1px solid red;width: 120px;height: 100px;margin: 0 auto;/* float: left; */position: absolute;left: 50%;margin-left: -60px;top: 50%;margin-top: -50px;}</style><body><div class="box"><div class="son"></div></div></body>

z-index层级：

浮动会使后面的元素默认排在最下面，而定位会使后面的元素默认排在最上面，有的时候需要改变这个顺序，此时定位的元素可以使用z-index来解决这个问题（定位的元素才有z-index），其默认值为0，其值没有限制。

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海

CSS中文档流之普通流，浮动及定位、浮动特性及清除浮动的方式、定位模式，子绝父相搭配定位方式、z-index层级相关推荐

【CSS】定位--静态定位-相对定位-绝对定位-子绝父相-固定定位-粘性定位
文章目录 1. 为什么需要 2. 定位组成定位 = 定位模式 + 边偏移 2.1 定位模式 2.2边偏移 3. 静态定位 static (了解) 4. 相对定位 relative (重要) 5. 绝 ...
CSS中的子绝父相布局
前言在CSS中有三种定位方式:相对定位.绝对定位和固定定位一.相对定位相对定位的属性是position:relative,如过对某个元素设置了相对定位,元素就会根据自身左顶点进行位置偏移,元素还 ...
第6天-css笔记三大定位-定位子绝父相与精灵图
定位 ================================================================================= 用了子绝父相而带来的子盒子居中 ...
Web前端，CSS常用之相对定位和绝对定位的区别，静态定位、子绝父相、固定定位、元素的层级关系的了解
前言持续学习总结输出中,今天分享的是Web前端,CSS常用之相对定位和绝对定位的区别,静态定位.子绝父相.固定定位.元素的层级关系的了解 1.定位的基本介绍我们的网页常见布局方式有:标准流.浮动. ...
一文读懂css【css3】绝对（absolute）定位和相对（relative）定位相对定位是相对谁定位的绝对定位又是根据谁绝对定位的子绝父相包含块
目录何为定位偏移量垂直方向 top bottom 水平方向 left right relative-相对定位何为相对定位相对定位的特点实例元素代码的起始位置元素若不开启相对定位,即便设 ...
css定位(子绝父相)
定位 ☆定位核心 -- 子绝父相 1.1 在开发中什么时候需要使用定位? 定位就是解决标准流和浮动无法实现的效果. 1.2 「定位组成」定位 = 定位模式 + 边偏移定位模式:用于指定元素的定位方 ...
CSS中定位（带你实操代码掌握固定定位、绝对定位与相对定位（子绝父相））
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 目录固定定位绝 ...
css定位-子绝父相
题目要求: 开始的代码: <!DOCTYPE html> <head><meta charset="utf-8" /><link rel= ...
css样式子绝父相,子绝父相_HTML+CSS前端基础知识教程_腾讯视频
更多资料源码请加3252897743第1天 html 1.HTTP协议 2.html是纯文本3.html骨架4.DTD文档类型5.head标签6.body标签7.html基本语法8.h系列的标 ...

CSS中文档流之普通流，浮动及定位、浮动特性及清除浮动的方式、定位模式，子绝父相搭配定位方式、z-index层级

CSS中文档流之普通流，浮动及定位、浮动特性及清除浮动的方式、定位模式，子绝父相搭配定位方式、z-index层级相关推荐

最新文章

热门文章