布局的核心--浮动 float

最新推荐文章于 2025-04-22 17:49:36 发布

原创最新推荐文章于 2025-04-22 17:49:36 发布 · 234 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浮动 #清除浮动 #解决浮动影响的方法

web开发同时被 2 个专栏收录

12 篇文章

订阅专栏

布局的核心

3 篇文章

订阅专栏

本文深入探讨CSS中的浮动机制，如何使块级元素并排显示，及其对标准流的影响。介绍浮动的语法格式，以及四种解决浮动导致的高度塌陷问题的方法，包括使用伪元素进行清除。

（2）给父元素加 overflow:hidden

（3）前辈 clear:both / left / right

（4）伪元素

一、CSS的定位机制

标准流（普通流）

一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。

浮动

设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

用来做一些文字混排效果

定位

二、浮动解决的问题

1.块级元素并排排放

2.实质上：块级元素变成行内级元素

元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少

浮动的元素总是找离它最近的父级元素对齐但是不会超出内边距的范围

3.注意事项：

浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。

4.伪类选择器：

（1）语法：

标签名、类名的父元素的第一个孩子

选择器、类名：first-child{

}

标签名、类名的父元素的最后一个孩子

标签名、类名：last-child{

}

标签名、类名的父元素的第二个孩子开始

标签名、类名：nth-child(2n+1){

}

2n+1奇数

2n偶数

浏览器默认展示的元素的位置：div 独成一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
        }
        .box:first-child{
            background-color: deeppink;
            float: left;
        }
        .box:nth-child(2){
            background-color: red;
            float: left;
        }
        .box:nth-child(3){
            background-color: orange;
            float: left;
        }
        .box:nth-child(4){
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
<div class="box">第一个盒子</div>
<div class="box">第二个盒子</div>
<div class="box">第三个盒子</div>
<div class="box">第四个盒子</div>
</body>
</html>

三、浮动的语法格式

选择器{
    float:属性值;
    /*属性值有：left / right /none */
}


不浮动就是标准流

并排的元素必须同时加浮动属性，才能并排

四、浮动的影响及解决办法

1.影响

浮动元素会脱离标准流，原来的盒子的高没了，底下的盒子会占领并排盒子的位子

解决的是：父盒子高度塌陷（高度不存在）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
        }
        .p{
            width: 600px;
            height: 600px;
            background-color: red;
        }
        .box:first-child{
            background-color: yellow;
            float: left;
        }
        .box:nth-child(2){
            background-color: green;
            float: left;
        }
        .box:nth-child(3){
            background-color: deeppink;
            float: left;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="box">第一个盒子</div>
    <div class="box">第二个盒子</div>
    <div class="box">第三个盒子</div>
</div>
<p class="p"></p>
</body>
</html>

2.解决方法（清除浮动）

（1）给父盒子设定宽高

不实际

.father{
    border:1px solid black;
    height:200px;
}

（2）给父元素加 overflow:hidden

溢出隐藏

.father{
    border:1px solid black;
    overflow:hidden   /*溢出隐藏*/
}

（3）前辈 clear:both / left / right

属性必须依附于对象（标签）存在

增加文档树，使得文档树太庞大，影响用户体验

没有实现样式与结构相分离

（4）伪元素

前辈 clear:both，能不能创造一个标签，不属于文档树，又起到标签的效果

在样式CSS上创造标签（伪元素）

伪元素默认是一个行内元素，清除浮动影响必须得是个块级元素， display:block

.clearFix::after,.clearFix::before{
    content:'';
    clear:both;
    line-height:0;
    display:block;
}

<div class="father clearFix">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

伪元素的语法格式：

选择器：：after{

}

选择器：：before{

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 600px;
            height: 600px;
            margin: 300px;
            background-color: deeppink;
        }
        .box::after{
            content: '我是之后';
            padding: 20px;
            color: white;
            background-color: red;
        }
        .box::before{
            content: '我是之前';
            padding: 20px;
            color: white;
            background-color: red;

        }
    </style>
</head>
<body>
<div class="box">
    我是div标签，你是啥呀
</div>
</body>
</html>