浮动怎么写?

一.标准流

就是平时见到的那样,比如div换行显示,行内元素没有宽高.

常见标准流排版规则:

1.块级元素:从上往下,垂直布局,独占一行

2.行内元素或行内块元素,从左到右,水平布局,空间不够自动换行

但是标准流的排列方式很多时候无法满足我们的需求.

浮动的作用就是为了让块级标签完美的在一行显示.

二.行内块的问题

在学习浮动之前,我们想要让块级元素同一行显示可以将块级元素转成行内块元素.但是会有问题.

一行显示后,两个div之间会有默认的间距,会有空白的缝隙.

导致这个问题是因为两个div换行,代码换行.

浏览器解析行内块或行内标签的时候,如果标签换行书写会产生一个空格的距离

所以用浮动去完美的布局,解决行内块的问题

三.浮动-作用

以前是用来图文环绕

现在是网页布局

浮动会脱离标准流,所以如果两个div,如果第一个div设置浮动最左,第二个div会顶到最前面,导致看不到.被第一个div盖住.如果希望两个div从左到右挨着显示,那么两个div都要设置浮动最左

四.浮动的特点

1.浮动元素会脱离标准流,在标准流中不占位置

2.浮动元素比标准流高半个级别,可以盖住元素,但是盖不了文字.

3.浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右浮动.

4.浮动的标签,顶对齐

5.如果不想顶对齐可以通过margin-top往下挪

6.浮动有特殊的显示效果,一行可以显示多个,且可以设置宽高.

注意点:浮动的元素不能通过text-align:center或margin:0 auto进行居中 

用了浮动要去改变,可以通过定位position

五.清除浮动

如果子元素浮动了,此时子元素浮动拖标后,不占位置.所以就不能撑开标准流的块级父元素,所以我们要清楚浮动带来的影响.

父子级标签,子级浮动,父级没有高度,后面的标准流盒子会受影响,显示到上面的位置.

规避这个问题的方法:父级元素有高度.

但是有时候不能加高,比如新闻板块,不确定有多少新闻的时候,无法确定高度.

六.清除浮动的方法

1.直接设置父元素高度

2.额外标签法

           (1)在父元素内容的最后添加一个块级元素

            (2)给添加的块级元素设置clear:both

特点:

缺点:会在页面中添加额外的标签,会让页面的HTML结构变得复杂

清除浮动的类名,一般都取名为clearfix

3.单伪元素清除法

(1).基本写法

.clearfix::after{
content:'';
//伪元素添加的标签是行内,要求块.
display:block;
clear:both;

}

(2).补充写法

.clearfix::after{
content:'';
display:block;
clear:both;
height:0;
visbility:hidden;
}

优点:项目中使用,直接给标签加类即可清除浮动

4.双伪元素清除法

//.clearfix::before作用:解决外边距塌陷问题
//外边距塌陷:父子标签,都是块级,子级加margin会影响父级的位置
.clearfix::before,
.clearfix::after{
content:'',
display:table;
}
.clearfix::after{
clear:both;
}

5.给父元素设置overflow:hidden

直接给父元素设置overflow:hidden