浮动与清除浮动详解-优快云博客

本文链接：https://blog.youkuaiyun.com/IDApprentice/article/details/122694180

目标

1.能够说出为什么需要浮动

2.能够说出浮动的排列特性

2.能够说出为什么需要清除浮动

4.能够写出至少2种清除浮动的方法

1.浮动(float):

1.1 传统网页布局的三种方式(网页布局的本质:就是使用CSS来摆放盒子)

在PC端中CSS 提供三种传统布局方式:

普通流(标准流也叫文档流): 就是标签按照规定好的默认方式排列 ------ 标准流是最基本的布局网页的方式

1.块级元素会独占一行,从上向下排序排列

常用元素: div,hr,p,h1~h6,form,table,ul,ol,dl

2.行内元素会按照顺序,从左到右排序排列,碰到父级元素边缘则自动换行

常用元素:span,a,i,em等

重点:在实际开发中,一个页面基本都包含了这三种布局方式(移动端会学习新的布局方式)

我们为什么需要浮动?

因为很多在实际开发中,一些常见的需求仅仅使用标准流是不能实现的, 比如让块级元素在一行(因为要控制像素所以只有在浮动中可以严格控制) , 左青龙右白虎型 (即如何实现两个盒子的左右对齐?),

所以需要使用浮动 因为浮动可以改变元素标签默认的排列方式

浮动最经典的应用: 可以让多个块级元素一行内排列显示

网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动

什么是浮动?

float属性用于创建浮动框,将其移动到一边,知道左边缘或右边缘触及包含快或另一个浮动框的边缘

语法:

选择器{ float: 属性值; }

浮动特性(重难点)

设置浮动(float)的元素最重要特性:

一:1.脱离标准普通流的控制(浮)移动到指定位置(动),(俗称脱标)

2.浮动的盒子不再保留原本的位置

二: 如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对齐排列

三:任何元素都可以添加浮动.不管原本是什么模式的元素,添加浮动之后就具有行内块元素的特性 (小常识:如果行内元素有了浮动,则不需要转换块级\行内元素就可以直接添加高度和宽度)

1.如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动之后,宽度和内容大小有关

2.浮动的盒子中间是没有缝隙的,是紧挨着一起的

3.行内元素如果添加浮动同理也具备以上特性

浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置,我们网页布局一般采取的策略是:

先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置.符合网页布局第一准则

浮动布局有什么需要注意的点吗?

1.浮动和标准流的父盒子搭配

先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置

2.一个元素浮动了,理论上其余的兄弟元素也要浮动

一个盒子里面由多个子盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防止引起问题

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流

所有的父盒子都必须有高度吗?

当填充内容(产品,文字等)过多的时候就无法直接给予父盒子高度

此时:我们理想中的状态,让子盒子撑开父盒子,有多少子盒子,父盒子就会有多高

清除内外边距

  * {
            margin: 0;
            padding: 0;
        }

为什么需要清除浮动?

由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为0,影响下面的标准流盒子

由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响

清除浮动的本质

清除浮动的本质是清除浮动元素脱离标准流造成的影响

如果父盒子本身有高度,则不需要清除浮动

清除浮动之后,父级就会根据浮动的子盒子自动检测高度.父级有了高度,就不会影响下面的标准流了

语法:

选择器{claer:属性值;}

一般使用

. 名字 {

clear: both;

}

清除浮动

我们实际工作中,几乎只用clear,both

清除浮动的策略是:闭合浮动

清除浮动方法

要求新增的盒子要求必须是块级元素不能是行内元素(即要求这个新的空标签必须是块级元素)

清除浮动的策略是什么?

清除浮动的策略:闭合浮动,只让浮动在盒子内部影响,不影响父盒子外面的其他盒子

推荐使用后三种

1.什么叫做额外标签法?

额外标签法,也叫做隔墙法,就是在最后一个浮动的子元素后面添加一个额外标签,添加清除浮动样式不常用

2.父级添加overflow

可以给父级添加overflow属性,将其属性值设置为hidden,auto或scroll

优点:代码简洁

缺点:无法显示溢出的部分(多余的部分会被切除)

3. :after 伪元素法(京东,阿里等大厂均使用此方法)

缺点:照顾低版本浏览器
 .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .clearfix {   /*IE6,7 专有*/
        *zoom: 1;
    }
掌握在父级元素调用即可

4.双伪元素清除浮动
.clearfix:after, clearfix:after {
        content: "";
        display: table;
    }

    .clearfix:after {
        clear:both;
    }

    .clearfix {   /*IE6,7 专有*/
        *zoom: 1;
    }
缺点:照顾低版本浏览器

代表网站:小米,腾讯等