标准流

从上到下依次排列

浮动

脱离标准流，不占位置，但影响标准流，但是文字会环绕而非到浮动元素下面。
在最近父元素内浮动，不超过父元素的padding只在content内浮动
浮动是的元素显示模式变为inline-block

浮动导致父元素高度塌陷

解决方案:

给父元素高度
父元素overflow:hidden;即创建一个BFC区域，计算BFC区域高度会自动计算区域内浮动元素高度。
父元素::after{content:"";overflow:hidden;height:0;display:block;clear:both};.clearfix{*zoom:1;}
父盒子内加一个尾元素 <div style=“clear:both”></div>
双伪元素法:

.clearfix::before,.clearfix::after{content:"",display:block}
.clearfix::after{clear:both}
.clearfix{*zoom:1}

css-清除浮动方法大全!!

解决inline 布局中间孔隙

父元素font-size:0
子元素float:left

定位

定位属性

定位模式 position

static 默认定位
无法使用偏移量改变位置
relative 相对定位 不脱标
相对原来位置发生偏移，但是仍占原来位置
absolute 绝对定位脱标
彻底脱离标准流，不占标准流位置
fixed 相对于浏览器窗口固定定位脱标
相对于当前浏览器视口

边偏移 left top right bottom

绝对定位偏移基准点相对于最近的相对或绝对定位元素而言

绝对定位实现水平垂直居中

margin: 0 auto对于绝对定位盒子无效
故使用:
left:50%;
top:50%;
margin-left:-宽度/2；
margin-top:-高度/2；

固定绝对定位脱标发生显示转换inline-block

如果没有内容宽度没有，故需要指定宽度
相对定位不脱标不发生转换
所以对浮动的元素不需要加display:inline-block

层叠z-index

前端知识-CSS定位机制:标准流、浮动、定位相关推荐

CSS核心内容-标准流、盒子模型、浮动、定位
CSS核心内容-标准流.盒子模型.浮动.定位,了解了核心内容才能用CSS设计出一个简单的页面一.基础在了解核心内容之前需要先了解HTML中的两种标签:块级元素,行内元素: 块级元素:一个块级元素占 ...
html的浮动跟标准流,网页布局的标准流浮动流与定位流
一网页布局方式 #1.什么是网页布局方式布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如word,nodpad 等等而网页的布局方式指的就是浏览器这款工具是如何对网页中的元 ...
Web前端知识CSS（CSS定位、CSS透明、阴影、边框圆角）
一.CSS 定位定位的作用普通文档流中块元素垂直排列,行内元素水平排列. 定位能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置(自由的在某个盒子内移动位置或者固定在屏幕中的某 ...
Web前端知识CSS（清浮动的方法、CSS精灵图、滑动门）
一.清浮动的方法清除浮动的方法1.给浮动元素的父级盒子设置一个固定的高度优缺点:不够灵活,适用于高度固定的布局中 2.为浮动元素的父级盒子设置浮动优缺点:会产生新的浮动问题 3.为浮动元素的父盒 ...
css中脱离标准流的三种方式,CSS的三种手段让元素脱离标准本文档流
1.浮动浮动是CSS中用到的最多的一个选项,他有三个性质.关于浮动我们要强调一点,永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动. 1.1 浮动元素脱离标准文档流 1.1.1 大概描 ...
脱离标准流(2)定位
标准流里面的限制非常多,导致很多页面效果无法实现.如果我们现在就要并排.并且就要设置宽高,那该怎么办呢?办法是:移民!脱离标准流! css中一共有三种手段,使一个元素脱离标准文档流: (1)浮动 (2 ...
css笔记（选择器+清除浮动+定位+margin叠加以及子元素margin对父元素拖拽+羽化阴影）
##css(Cascading Style Sheet) 1.样式引入行内样式:优点--效率高: 缺点--html与css代码耦合,复用性低内部样式表:优点--解决css和html代码耦合: 缺点- ...
CSS静态布局——常规流，定位，浮动。
合理的网页布局方式合理的网页布局可以使网页内容以整洁有序的方式展示给用户.凌乱的布局则会使网页的信息无法正确传达,用户的目的没有达到等问题. 合理的网页布局应有: 1.合理地把页面切分为多个具有具体 ...
css中脱离标准流的三种方式,CSS——脱离标准流方法一：浮动
浮动是css里面布局用的最多的属性. 浮动语句: float:left; 左浮动 float:right; 右浮动 1.没有浮动的时候 2.两个盒子都左浮动浮动的元素脱标,那么就能并排了,并且能 ...

前端知识-CSS定位机制:标准流、浮动、定位

标准流

浮动