【css浮动讲解】

最新推荐文章于 2022-11-30 11:50:22 发布

斩杀zhansha

最新推荐文章于 2022-11-30 11:50:22 发布

阅读量195

点赞数

分类专栏：编程 html+css 文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_67742636/article/details/125057373

版权

编程同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

html+css

14 篇文章 0 订阅

订阅专栏

网页布局本质是用css来摆放盒子，把盒子摆放到相应的位置，css提供了三种传统布局方式（简单来说，就是盒子如何进行排列顺序）

1. 普通流（标准流）

2.浮动

3.定位

1.2 标准流（普通流或者叫文档流）

1.块元素：div,hr,p,h1-h6,ul,ol,li,dl,form,tabl

2.行内元素（内联元素）：会按照顺序会从左往右依次排序，碰到父元素的边缘则自动换行，常用标签有：span,a,i,em等

以上都是标准流布局就是按照标签规定好的顺序进行排列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>标准流就是根据标签默认方式排列</p>
    <p>标准流就是根据标签默认方式排列</p>
    <p>标准流就是根据标签默认方式排列</p>
    <p>标准流就是根据标签默认方式排列</p>
    <p>标准流就是根据标签默认方式排列</p>
    <p>标准流就是根据标签默认方式排列</p>
    <img src="" alt="">
    <ul>
        <li>a</li>
        <li>a</li>
        <li>a</li>
    </ul>
    <a href="">标准流</a>
    <span>浮动</span>
    <em>定位</em>
    <em>定位</em>
    <em>定位</em>
    <em>定位</em>
    <em>定位</em>
    <em>定位</em>
    

</body>
</html>

为什么需要浮动？

我们是否能用标准流很容易实现如下效果？

答：比较难，虽然转换行内块元素可以实现，但他们之间会有较大的空隙

提问2

如何实现两个盒子左右对齐

总结：很多布局效果，标准流是无法完成的，所以需要利用浮动来完成布局，因为浮动可以改变元素标签的默认排列方式

float 属性用于创建浮动框，将其移动到另一边，直到左边的边缘或右边边缘或另一个浮动框的边缘

语法：

选择器 {

float：属性值；

}

以下为float的属性重点记住前三个，这是开发中最常用的

加了浮动之后的元素，会具有很多特性

1.浮动元素会脱离标准流（脱标）

2.浮动元素会在一排显示并且元素顶部对齐

3.浮动元素具有行内块元素的特性

2.设置了浮动的元素的重要特征

1.脱离标准普通流的控制，移动到指定位置简称脱标

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

注意：浮动的元素是相互贴靠在一起是没有空隙的，如果父级宽度装不下这些浮动，多出的盒子会另起一行，如下图所示！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: red;
        }
        .left,
        .right {
            width: 100px;
            height: 100px;
        }      /*公共属性*/
        .left {
            float: left;
            background-color: black;
        }
        .right {
            float: left;
            background-color: pink;
        }
    </style>
</head>
<body>
    
    <div  class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

浮动元素具有行内块特性

1.如果盒子没有设置宽度，默认宽度是和父级一样宽的，但是添加浮动后他的大小根据内容决定如下图所示

2.浮动的盒子中间是没有空隙的（上面已经展示过了不做展示）

3.行内元素同理

代码块如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        p {
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"> 
        <p>添加浮动后他的大小由内容决定</p>
    </div>
</body>
</html>

此时p的宽度默认和他的父亲一样宽，接下来我们给p标签加上浮动，来让我们看下效果

行内元素设置浮动后可以改变宽高，具有行内块特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        span {
            width: 100px;
            height: 100px;
            background-color: red;
        }
     
    </style>
</head>
<body>
    <div class="box"> 
      <span>hello world</span>
    </div>
</body>
</html>

上面，即使给span标签设置宽高也不起作用，因为他是行内元素，不能设置宽高，让我看下变成浮动后的span标签有什么变化

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box {
                width: 500px;
                height: 500px;
                background-color: pink;
            }
            span {
                /* 设置向左浮动 */
                float: left;
                width: 100px;
                height: 100px;
                background-color: red;
            }
        
        </style>
    </head>
    <body>
        <div class="box"> 
        <span>hello world</span>
        </div>
    </body>
    </html>

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

如下图所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: blue;
        }
        .no1,
        .no2,
        .no3
         {
            width: 100px;
            height: 100px;
        }
        
        .no1 {
           
            background-color: red;
        }
        .no2 {
           
            
            background-color: aliceblue;
        }
        .no3 {
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="no1"></div>
        <div class="no2"></div>
        <div class="no3"></div>
        <div class="no4"></div>
    </div>
</body>
</html>

以上代码块没有设置浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: blue;
        }
        .no1,
        .no2,
        .no3
         {
            width: 100px;
            height: 100px;
        }
        
        .no1 {
           
            background-color: red;
        }
        .no2 {
           
            float: left;
            background-color: aliceblue;
        }
        .no3 {
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="no1"></div>
        <div class="no2"></div>
        <div class="no3"></div>
        <div class="no4"></div>
    </div>
</body>
</html>

给no2设置向左浮动，我们会发现，no2浮动后虽然脱离了标准流，但还是在原来位置？这是为什么呢，因为no1是标准流，标准流是独占一行，所以no2才会原地漂浮

以上就是我关于浮动的讲解，希望能帮到初学者朋友们

斩杀zhansha

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【css浮动讲解】

网页布局本质是用css来摆放盒子，把盒子摆放到相应的位置，css提供了三种传统布局方式（简单来说，就是盒子如何进行排列顺序）1. 普通流（标准流）2.浮动3.定位1.2 标准流（普通流或者叫文档流）1.块元素：div,hr,p,h1-h6,ul,ol,li,dl,form,tabl2.行内元素（内联元素）：会按照顺序会从左往右依次排序，碰到父元素的边缘则自动换行，常用标签有：span,a,i,em等以上都是标准流布局就是按照标签规定好的顺序进行排列<!DOCT
复制链接

扫一扫