Css margin 和 float浮动

最新推荐文章于 2024-04-26 22:14:41 发布

爱编程爱生活~

最新推荐文章于 2024-04-26 22:14:41 发布

阅读量784

点赞数 2

分类专栏： CSDN Java 文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_53312143/article/details/126981351

版权

CSDN 同时被 2 个专栏收录

35 篇文章 1 订阅

订阅专栏

Java

32 篇文章 1 订阅

订阅专栏

1.浮动:

　　定义: 浮动是css里面布局最多的一个属性，也是很重要的一个属性。

　　　　float：表示浮动的意思。它有四个值

none: 表示不浮动，默认
right：表示右浮动
left: 表示左浮动

　　　　float四大特性:

　　　　　　1.浮动的元素脱标

　　　　　　2.浮动的元素互相贴靠

　　　　　　3.浮动的元素由"字围"效果

　　　　　　4.收缩的效果

浮动的元素脱标

代码演示

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">
    <link rel="stylesheet" href="css/test1.css">
    <title>Document</title>
</head>
<body>
    <div class="box1">小红</div>
    <div class="box2">小黄</div>
    <span>小马哥</span>
    <span>小马哥</span>
</body>
</html>

css

.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;

}
.box2{
    width: 400px;
    height: 400px;
    background-color: yellow;

}
span{
    background-color: green;
    float: left;
    width: 300px;
    height: 50px;
}

效果展示

结果：红色盒子压盖住了黄色的盒子，一个行内的span标签竟然能够设置宽高了。

原因1：小红设置了浮动，小黄没有设置浮动，小红脱离了标准文档流，其实就是它不在页面中占位置了，此时浏览器认为小黄是标准文档流中的第一个盒子。所以就渲染到了页面中的第一个位置上。这种现象，也有一种叫法，浮动元素“飘起来了”，但我不建议大家这样叫。

原因2：所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元素，都能够设置宽高

浮动的元素互相贴靠

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">
    <link rel="stylesheet" href="css/test1.css">
    <title>Document</title>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>

css

.box1{
    width: 100px;
    height: 400px;
    float: left;
    background-color: red;
}
.box2{
    width: 150px;       
    height: 450px;
    float: left;
    background-color: yellow;
}
.box3{
    width: 300px;
    height: 300px;
    float: left;
    background-color: green;
}

效果

结果发现： 如果父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边。 如果没有足够的空间，那么就会靠着1哥，如果再没有足够的空间靠着1哥，自己往边靠

浮动的元素由"字围"效果

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">
    <link rel="stylesheet" href="css/test1.css">
    <title>Document</title>
</head>
<body>
    <div>
        <img src="img/bg1.png" alt="">    
    </div>
    <p>
        123路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
    </p>
</body>
</html>

css

*{
    padding: 0;
    margin: 0;
}
div{
    float: left;
}
p{
    background-color: #666;
}

效果：

结果：所谓字围效果，当div浮动，p不浮动，div遮盖住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果。

收缩的效果

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">
    <link rel="stylesheet" href="css/test1.css">
    <title>Document</title>
</head>
<body>
    <div>
        喜羊羊与灰太狼
   </div>
</body>
</html>

css

div{
    float: left;
    background-color: red;
}

效果：

没加left前

加了后

结果：收缩：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）

注意：关于浮动，我们一定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就要一起浮动。容易牵一发而动全身，另外，有浮动，一定要清除浮动，

为什么要清除浮动:

　　　　给父盒子设置高度:

　　　　　　一般会常用页面中固定高度的，并且子元素并排显示的布局。比如：导航栏

　　　　clear: both (清除浮动):

　　　　　　clear：意思就是清除的意思。有三个值：

　　　　　　　　left：当前元素左边不允许有浮动元素

　　　　　　　　right：当前元素右边不允许有浮动元素

　　　　　　　　both：当前元素左右两边不允许有浮动元素

　　　　　　　　给浮动元素的后面加一个空的div，并且该元素不浮动，然后设置clear：both。

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">
    <link rel="stylesheet" href="css/test1.css">
    <title>Document</title>
</head>
<body>
    <div>
        <ul>
            <li>Python</li>
            <li>web</li>
            <li>linux</li>
            <div class="clear"></div>    
        </ul>        
</div>
<div class="box">        
</div> 
</body>
</html>

css

*{
    padding: 0;
    margin: 0;
}
ul{
    list-style: none;
}
div{
    width: 400px;
}
div ul li {
    float: left;
    width: 100px;
    height: 40px;
    background-color: red;
}
.box{
    width: 200px;
    height: 100px;
    background-color: yellow;
}
.clear{
     clear: both;
}

效果

清除浮动后