浮动和清浮动，内外边距和margin的坑

浮动：使元素脱离文档流，按照一定的方式排列，遇到相邻的浮动元素或者父级的边界停下来。

可以往left，也可以往right

一般建议用ul.f>li.s编写，（<ul></ul>

unorder list无序标签，需搭配li作为子标签）,

用div也可以，但是有些浮动效果做不到。

特性：

1.浮动的元素排在同一排

2.浮动的元素内容撑开高度

3.浮动的元素支持所有的CSS样式

4.浮动的元素脱离文档流

5.浮动的元素提升层级半级

浮动与行宽的关系

元素浮动后，没有完全脱离文档流，它影响着文本的行宽

清浮动/BFC的方式(用来处理浮动元素拖脱离文档流的方法）

1.父级也浮动

弊端：左右的margin：0px auto；会失效

2.给父级加display：inline-block；

弊端：左右的margin：0px auto；会失效（如果需要让元素居中，可以给父级加text-align：center；）

3.给父级加高

弊端：扩展性不好

4.br标签

1⃣️<br/>换行

2⃣️<br clear="all"/>不推荐使用

5.clear：元素的某一方向不允许出现其他的浮动元素

clear：both；left、right、one。

使用clear：both的时候，需要注意书写顺序，顺序不同有不同的影响

clear：both需要加在块级标签上才会有效

4和5不符合w3c规范，违反结构、样式、行为，三者分离原则

6.给父级添加伪类子元素

：after{

content：“”；

display：block；

clear：both；

}

推荐使用，目前主流方法

1.添加浮动元素的不浮动兄弟标签，并设置clear属性，属性值一般直接给both

2.浮动元素的父级元素设置overflow属性，属性值为hidden，扩展性较差

3.浮动元素的父级设置高度，实际上没有清浮动的效果，只产生感官上的效果,扩展性更差

4.给父级元素添加伪类子元素，伪类子元素用于清除浮动，清除后，浮动元素的大小撑开父级的高度。

.div:after{

content:""

display:block;

clear:both;

}

clear{

zoom：1；

}

（因为只有IE8+以上的浏览器才支持）

相当于最后给一个空<div style:"cllear:both;"></div>

内外边距以及margin的坑：

1.margin 外边距

分为上下左右四个方位，用于设置元素之间的间距

2.margin注意事项

1⃣当相邻元素的margin-right和margin-left发生重叠的时候，间距叠加

2⃣当相邻元素的上下margin发生重叠的时候，间距取大值

3.margin和padding的数值表示

一个值时，表示上右下左，

两个值时，一值表示上下，二值表示右左

三个值时，一值表示上，二值表示右左，三值表示下

四个值时，上右下左，从top开始顺时针方向

4.transparent 透明色

5.margin的小性子：当父子级冲突，且长宽一样时，显示子级

1⃣第一个子级的margin-top会在特定的情况下穿透父级，不显示父级，只显示margin；

2⃣兄弟关系的margin-top和margin-bottom会叠加，谁大算谁的

解决办法：

1.父级设置border，如若不想显现，可以把颜色设置成透明色transparent

2.父级设置padding-top

3.父级设置overflow：hidden（溢出隐藏）

overflow的基本用法

1.子级溢出的部分隐藏掉

2.可以解决margin-top的坑

4.给父元素或者子元素声明浮动float

5.使父元素或子元素声明为绝对定位：position:absolute;

6.给父元素添加属性 overflow:auto; positon:relative；