css中的定位、清除浮动

1、定位

1、绝对定位  absolute

2、相对定位  relactive

3、固定定位 fixed

脱离文档流:排版的基础就是要脱离文档流:1 浮动,2 绝对定位,3固定定位

脱离文档流后果:父元素无法被撑开;

绝对定位的盒子由于脱离了文档流,不能用margin:0 auto(标准的文档流中)了

float会把浮动元素变成块级元素,(行内元素是无法设置宽高的,浮动之后就可以了);

2、如何清楚浮动?

 1、给浮动元素的父元素加具体的高度

2、在需要清除浮动的元素设置 clear:both 属性,清除别人对我的影响,但是这个时候margin失效

3、添加overflow:hidden触发了BFC,父亲能被浮动的子元素撑开高度,(也是实际工作中常用到的方法)、

3、BFC触发的条件

1 float:left;

2 position:absolute/fixed

3 overflow:auto/hidden

4<html>根元素

5display:inline-block/table-cell

BFC的特性:

  1. 属于同一个BFC的两个相邻Box的margin会发生折叠,不同BFC不会发生折叠

  2. BFC的区域不会与浮动元素的区域重叠

  3. BFC的高度包含浮动子元素的高度(不包括宽度)

  4. BFC在页面上是一个独立的容器,里外的元素不会互相影响

原文地址:https://www.cnblogs.com/jwenming/p/14443759.html