CSS学习Day04 浮动

一、浮动

1、布局的三种基本方式

（1）标准流 按照标签默认的特性摆放盒子即为标准流

（2）浮动流 利用浮动摆放盒子即为浮动流

（3）定位流 利用定位摆放盒子即为定位流

2、浮动的意义

（1）浮动最开始是做图文绕排的。

（2）浮动的布局应用场景：让元素直接排成一排，或者一个靠左一个靠右

3、浮动的特性

浮动的元素脱标

脱标：（脱离了标准流）

标准流：块元素独占一行，行内元素可以排一排的这种默认的盒子排列方式就是标准流 （按照默认的规则排列的）

① 脱标的元素不占标准流的位置（会盖住后面的标准流元素）

②不会继承父级的的宽度，内容有多个就撑多大 （不论前身块级还是行内）

③可以直接写宽高 （不论前身块级还是行内）

④margin:auto对于脱标元素不起作用

浮动口诀：要浮动 兄弟元素一起浮动 能够避免浮动盖住标准流的问题

 

其他细节特性：

1. 浮动是在盒子内容区域浮动，不会超出padding区域（水平方向）

2. 浮动的盒子一排装不下的时候会掉下来（掉下来的位置会根据上一个浮动盒子的高度决定）

3. 右浮动会颠倒盒子顺序 4. 浮动的盒子压不住文字和图片 5. 尽量在标准流的盒子里面浮动

 

二、伪元素

元素	描述
:first-letter	向文本的第一个字母添加特殊样式。
:first-line	向文本的首行添加特殊样式。
:before	在元素之前添加内容。
:after	在元素之后添加内容。

伪元素特性：

1、伪元素由css渲染 所以不会增加你的DOM（html结构）开销

2、伪元素默认是行内元素 可以进行转块等处理

3、伪元素不管有没有内容 content这个值一定不能少 即使没有 也要写个空

4、伪元素 官方推荐写:: 但是为了兼容考虑 写成单冒号

5、因为伪元素是css渲染 所以JS获取不到

 

三、清除浮动

原因：浮动元素脱离了标准流，导致撑不开父级容器

1. 强行给父盒子添加高度 （不推荐，不利于后期维护）

2. 创建一个新的块级盒子放在浮动元素的最后面，给这个盒子添加一个css属性：clear:both;（不推荐，会产生一个多余的盒子）

3. 伪元素清除浮动 （推荐，书写一个公共类就可以使用）

.clearfix::after {

/* 伪元素必不可少的一句话 这句话没有 伪元素不生效 */

content: '';

/* 将伪元素转换成块级元素 因为伪元素默认是行内元素 而清除浮动必须是块级元素 */

display: block;

/* 清除浮动的核心语句 */

clear: both;

/* 为了更高的容错率 添加上这两句话 */

height: 0;

visibility: hidden;

}

4. 给父元素添加overflow:hidden; (在某些特定场景下使用不了)