布局的核心之一：浮动

最新推荐文章于 2022-02-15 16:14:24 发布

珂鸣玉

最新推荐文章于 2022-02-15 16:14:24 发布

阅读量198

点赞数

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

一、CSS的定位机制

标准流（普通流）：一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
浮动：设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

用来做一些文字混排效果

二、基本语法

在CSS中，通过float属性来定义浮动，其基本语法格式如下：

选择器{float:属性值;}

属性值描述：

left 元素向左浮动

right 元素向右浮动

none 元素不浮动（默认值）

三、浮动特性及语法

1.块级元素并排排放

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

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

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

3、浮动特性以及注意事项

1、浮动首先创建包含块的概念（包裹）。就是说，浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。

2、浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

3、由2可以推断出，一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。

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

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

6、浮动根据元素书写的位置来显示相应的浮动。

总结：浮动 ---> 浮漏特

浮：加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。

漏：加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏给了标准流的盒子。

特：特别注意，这是特殊的使用，有很多的不好处，使用要谨慎。

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>