一篇博客带你学会浮动

最新推荐文章于 2024-08-09 18:43:30 发布

丁佳文

最新推荐文章于 2024-08-09 18:43:30 发布

阅读量115

点赞数 3

文章标签： html

本文链接：https://blog.csdn.net/weixin_43454614/article/details/114666782

版权

	学习浮动首先要知道浮动的概基本逻辑：
		1：元素浮动起来以后会脱离文档流，不在占有之前的空间，其他未浮动的元素会上前补位。
		2：浮动元素会停靠在父元素的左边或者右边，或者停靠在已经浮动的边缘上。
		3：浮动元素只会在当前行浮动。
		4：浮动元素依然位于父元素之后。
	浮动引发的特点：
		1：父元素的宽度不够时，最后一个元素会自动换行。
		2：元素一旦浮动之后，会变成块级元素
		3：margin auto 会失效
		4：文本  行内元素和行内块元素采用文字环绕单位方式进行排列是不会被浮动元素压在底下。
	下面我们来看一下代码和运行结果

<!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>
        .father{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            margin: 100px auto;
        }
        .son1{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .son2{
            width: 25px;
            height: 100px;
            background-color: green;
            /* float: left; */
        }
        .son3{
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }
        
    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2">
            <div class="sun1"></div>
            <span class="sun2"></span>
            <div class="sun3"></div>
        </div>
        <div class="son3"></div>
    </div>
</body>
</html>

涉及到基督教
如上图，红色浮动，第二行的绿色补位到红色之前的区域，蓝色跟着也向上补位。所以只是浮动的一个特点。学会了吗？

丁佳文

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
5
评论
一篇博客带你学会浮动

学习浮动首先要知道浮动的概基本逻辑： 1：元素浮动起来以后会脱离文档流，不在占有之前的空间，其他未浮动的元素会上前补位。 2：浮动元素会停靠在父元素的左边或者右边，或者停靠在已经浮动的边缘上。 3：浮动元素只会在当前行浮动。 4：浮动元素依然位于父元素之后。浮动引发的特点： 1：父元素的宽度不够时，最后一个元素会自动换行。 2：元素一旦浮动之后，会变成块级元素 3：margin auto 会失效 4：文本行内元素和行内块元素采用文字环绕单位方式进行排列是不会被浮动元.
复制链接

扫一扫