前端学习笔记43-浮动的简介

最新推荐文章于 2023-03-29 10:10:03 发布

小欣CZX

最新推荐文章于 2023-03-29 10:10:03 发布

阅读量126

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_45034895/article/details/116372086

版权

小白前端学习专栏收录该内容

100 篇文章 7 订阅

订阅专栏

前端学习笔记43-浮动的简介

float
水平布局等式
浮动总结

这节学的是浮动，可以使元素向父元素的左侧和右侧移动

float

可选值：
none：默认值，元素不浮动
left：元素向左浮动
right：元素向右移动
看代码，

<!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>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            float: right;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

在这里插入图片描述
从上图可看到，向右移动了。

水平布局等式

在笔记36里提到，子元素的七个水平布局设置的和要等于父元素内容区的宽度。但是如果我们设置float为left或right，则这个等式可以不用成立。
比如，我们不设置float时，按F12看源码，如下图。box1有一个橙色的右外边距，因为要满足水平总宽度等于父元素的内容区宽度。
在这里插入图片描述
如果我们给box1设置float:left，看下图。选中box1时，没有橙色外边距了。所以，看上去设置了left没啥变化，实际上还是有的。

既然如此，我们是不是就可以在box1放其他块了？没错。看下面代码和显示结果。

<!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>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color:yellow;

        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

在这里插入图片描述
看到没，两个box重叠了。但是为啥是box1在box2上面呢？

这就要提到之前学的文档流了，文档流是网页的最底层，元素默认在这一层。当我们设置了元素的float后，它就从文档流脱离了。
所以box1脱离文档流后，box2的位置就是文档流的左上角，且是网页最底层，自然就被box1挡住了。
如果我们想让box1和box2横向并排，可以让box2也从文档流脱离。

<!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>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color:yellow;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

在这里插入图片描述

浮动总结

1浮动元素会脱离文档流，不再占据文档流中的位置
2设置浮动以后元素会向父元素的左侧或右侧移动
3移动的范围不会超过父元素范围
4浮动元素不会盖住其他浮动元素（比如上图的效果，box1和box2都浮动，且左移，box2排在了box1的后面。）
5如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移。（看下面代码，box1没有浮动，box2和box3浮动，但box2和box3在第二行而不是第一行）

<!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>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /* float: left; */
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color:yellow;
            float: left;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color:red;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    
</body>
</html>

在这里插入图片描述
6如果一行容纳不下好几个浮动元素，会换行。
7浮动元素不会超过它前边的浮动的兄弟元素。（看下面代码，box3是向右移动，但虽然第一行右边有位置，但由于box2在第二行，且它在box3前边，所以box3也只能在第二行。）

<!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>
        .box1{
            width: 270px;
            height: 100px;
            background-color: #bfa;
            float: left;
        }
        .box2{
            width: 240px;
            height: 100px;
            background-color:yellow;
            float: left;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color:red;
            float: right;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    
</body>
</html>

在这里插入图片描述

小欣CZX

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
4
评论
前端学习笔记43-浮动的简介

前端学习笔记43-浮动的简介float水平布局等式浮动总结这节学的是浮动，可以使元素向父元素的左侧和右侧移动float可选值：none：默认值，元素不浮动left：元素向左浮动right：元素向右移动看代码，<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE
复制链接

扫一扫