我不知道的css float

最新推荐文章于 2021-08-04 19:38:08 发布

qq_21439711

最新推荐文章于 2021-08-04 19:38:08 发布

阅读量72

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_21439711/article/details/110650688

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

float的设计初衷

float被设计出来的初衷是用于——文字环绕效果。即：一个图片一段文字，图片float:left之后，文字会环绕图片。

<!DOCTYPE html>
<head>
    <style>
       #image{
           float: left;
       }   
    </style>
    <title></title>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
        <img src="1.png" id="image">
        ssjhsjdhcsjdchsjdhsdjchsdjkchsdjchs
        djcksdsdcsdcsdcsdcsdcsdcsdcscsdssjhs
        jdhcsjdchsjdhsdjchsdjkchsdjchsdjcksdsdcs
        dcsdcsdcsdcsdcsdcscsdcscsdcsdcsdssjhsjdhcsj
        dchsjdhsdjchsdjkchsdjchsdjcksdsdcsdcsdcsdcsdcsdcsd
        cscsdcscsdcsdcsdssjhsjdhcsjdchsjdhsdjchsdjkchsdjchsdj
        cksdsdcsdcsdcsdcsdcsdcsdcscsdcscsdcsdcsdssjhsjdhcsjdchsjdh
        sdjchsdjkchsdjchsdjcksdsdcsdcsdcsdcsdcsdcsdcscsdcscsdcsdcsd
        ssjhsjdhcsjdchsjdhsdjchsdjkchsdjchsdjcksdsdcsdcsdcsdcsdcsdcsd
        cscsdcscsdcsdcsdssjhsjdhcsjdchsjdhsdjchsdjkchsdjchsdjcksdsdcsdc
        sdcsdcsdcsdcsdcscsdcscsdcsdcsdssjhsjdhcsjdchsjdhsdjchsdjkchsdjch
        sdjcksdsdcsdcsdcsdcsdcsdcsdcscsdcscsdcsdcsdcscsdcsdcsd
</html>

在这里插入图片描述

float对父元素的影响

float元素会脱离文档流，使得父元素坍塌

<!DOCTYPE html>
<head>
    <style>
       #image{
           float: left;
       }
       div {
           border:2px solid hotpink;
       }
    </style>
    <title></title>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <div>
        <img src="1.png" id="image">
    </div>
</html>

在这里插入图片描述
因为float了的元素会脱离文档流，所以会使得父元素坍塌。但是当div中有文字时，文字还是会环绕在img周围的，因为文字环绕后又把父元素撑起来了。如下图：

float对自身的影响

float具有包裹性

<!DOCTYPE html>
<head>
    <style>
       div {
           float: left;
           border:2px solid hotpink;
       }
       
    </style>
    <title></title>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <div>
        <p>ddjhjhj</p>
    </div>
</html>

在这里插入图片描述
普通的div如果没有设置宽度，它会撑满整个屏幕，而如果给div增加float:left之后，它突然变得紧凑了，宽度发生了变化，把内容文字包裹了——这就是包裹性。div设置了float之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器。

块元素可以在一行显示，宽由内容撑起来

<!DOCTYPE html>
<head>
    <style>
        #father1{
            width:200px;
            height: 30px;
            float: left;
            background-color:hotpink;
            border:1px solid black;
        }
    </style>
    <title></title>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
   <div id="father1"></div>
   <div id="father1"></div>
   <div id="father1"></div>
   <div id="father1"></div>
</html>

在这里插入图片描述

内联元素设置float后可以设置宽和高(形成BFC块)
设置float以后就会形成一个BFC，BFC会接管自己的宽和高。

<!DOCTYPE html>
<head>
    <style>
        #father1{
            width:200px;
            height: 30px;
            float: left;
            background-color:hotpink;
        }
       
    </style>
    <title></title>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
   <span id="father1">
        sdfdfvdfvdvfdvdf
   </span>
</html>

在这里插入图片描述

float能清除空格

<!DOCTYPE html>
<head>
    <style>
        img{
            border:1px solid black;
        }
    </style>
    <title></title>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
   <div id="father1">
       <img src="1.png">
       <img src="1.png">
       <img src="1.png">
       <img src="1.png">
   </div>
</html>

在这里插入图片描述
正常的img中间是会有空格的，因为多个标签会有换行，而浏览器识别换行为空格，这也是很正常的。给img增加了float:left的样式，这就使得img之间没有了空格，四个img紧紧挨着。

“清空格”这一特性的根本原因是由于float会导致节点脱离文档流结构。它都不属于文档流结构了，那么它身边的什么换行、空格就都和它没关系的，它就尽量的往一边去靠拢，能靠多近就靠多近，这就是清空格的本质。

浮动元素对兄弟元素的影响

如果float元素在非float元素后，那么float元素会换行

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
.container{
    width: 400px;
    height: 200px;
}
.right{
    background-color: green; 
    float: right;
    height: 100%;
    width:100px;
}
.middle{
    background-color: red; 
    width:100px;
    height:100%;
}
</style>
<body>
    <div class=container>  
        <div class=middle></div>     
        <div class=right></div>  
    </div>
</body>
</html>

在这里插入图片描述
靠右的元素自动换行了，原因是：当“非float的元素”和“float的元素”在一起的时候,如果非float元素在先,那么float的元素将受到排斥。可以调整float和非float元素的位置来确定。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
.container{
    width: 400px;
    height: 200px;
}
.right{
    background-color: green; 
    float: right;
    height: 100%;
    width:100px;
}
.middle{
    background-color: red; 
    width:100px;
    height:100%;
}
</style>
<body>
    <div class=container> 
        <div class=right></div>
        <div class=middle></div>          
    </div>
</body>
</html>

在这里插入图片描述

当前元素分类a(float:left)	下一个紧邻元素分类b(不含float)	结论
块级元素	块级元素	b会填充a遗留下来的空间，a会和b发生重叠，a的图层在上面。
块级元素	内联元素	b会紧跟在a的后面。并根据自身内联元素的特点，是否换行。
内联元素	块级元素	b不会跟随a的移动。
内联元素	内联元素	b会紧跟在a的后面。并根据自身内联元素的特点，是否换行。

块+块

<!DOCTYPE html>
<head>
    <style>
        #father1{
            background: greenyellow; 
            width: 200px; 
            height: 100px; 
            float:left;
            
        }
        #father2{
            background: blueviolet; 
            width: 200px; 
            height: 100px; 
        }
        .area{
            width: 200px; 
            height: 100px; 
        }
    </style>
    <title></title>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <div id="father1" class="area"></div>
   	<div  id="father2" class="area"></div>
</html>

在这里插入图片描述

块+内

<!DOCTYPE html>
<head>
    <style>
        #father1{
            background: greenyellow; 
            width: 200px; 
            height: 100px; 
            float:left;
        }
        #father2{
            background: blueviolet; 
            width: 200px; 
            height: 100px; 
        }
        .area{
            width: 200px; 
            height: 100px; 
        }
    </style>
    <title></title>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <div id="father1" class="area"></div>
 	<span>sdhsdhfsdjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkcsnsjxnsjkdnxsjkdnsiucwewoieduwidxnd</span>
</html>

在这里插入图片描述

内+块

<!DOCTYPE html>
<head>
    <style>
        #father1{
            background: greenyellow; 
            width: 200px; 
            height: 100px; 
            float:left;
        }
        #father2{
            background: blueviolet; 
            width: 200px; 
            height: 100px;
        }
        .area{
            width: 200px; 
            height: 100px; 
        }
    </style>
    <title></title>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <!--<div id="father1" class="area"></div>-->
    <span id="father1">sdjklsjdksjdksldjskljjjjjjjjjjjjjjjjjfskjfkdjfdskjfskdfjsfjsdklfjsdfewffqkwejf</span>
   <div  id="father2" class="area"></div>
</html>

在这里插入图片描述

内+块

<!DOCTYPE html>
<head>
    <style>
        #father1{
            float:left;
            color:red
        }
       
    </style>
    <title></title>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <span id="father1">sdhsdhfsdjkkkkkkkkkkkkk</span>
    <span>sdhsdhfsdjkkkkkkkkkkkk</span>
</html>

在这里插入图片描述

如何清除浮动

在浮动元素的相邻地方添加一个空的div元素并上加clear:both;

<!DOCTYPE html>
<head>
    <style>
        img{
            float: left;
            border:1px solid black;
        }
        #clear{
            clear: both;
        }
        #father1{
            background-color: tomato;
            border:1px solid black
        }
    </style>
    <title></title>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
   <div id="father1">
       <img src="1.png">
       <div id="clear"></div>
   </div>
</html>

在这里插入图片描述

2. 父级div定义伪元素:after

<!DOCTYPE html>
<head>
    <style>
        img{
            float: left;
            border:1px solid black;
        }
        #father1{
            background-color: tomato;
            border:1px solid black
        }
        #father1::after{
            content: " "; 
            clear: both; 
            display: block;
        }
    </style>
    <title></title>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
   <div id="father1">
       <img src="1.png">
       <div id="clear"></div>
   </div>
</html>

在这里插入图片描述

父级div定义 overflow:hidden；zoom:1

<!DOCTYPE html>
<head>
    <style>
        img{
            float: left;
            border:1px solid black;
        }
      
        #father1{
            overflow: hidden;
            background-color: tomato;
            border:1px solid black
        }
    </style>
    <title></title>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
   <div id="father1">
       <img src="1.png">
   </div>
</html>

在这里插入图片描述

qq_21439711

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
我不知道的css float

float的设计初衷float被设计出来的初衷是用于——文字环绕效果。即：一个图片一段文字，图片float:left之后，文字会环绕图片。<!DOCTYPE html><head> <style> #image{ float: left; } </style> <title></title></head><body>
复制链接

扫一扫