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;
}

效果

清除浮动后

清除浮动前

结果：没加清除浮动，第一个div会覆盖到第二个div上，并且空的div块也会受到浮动影响向后叠加，我们加个颜色看一下（第三图），消除浮动后（如第四图）后面的块都不会收到前面浮动的影响。

Css margin 和 float浮动相关推荐

css选择器及float(浮动)
--------------------------选择器( css有就近原则)------------------------------- 选择器名称在css表的 ...
html中使浮动的字为行排列,CSS布局：float浮动
优秀文章:https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 浮动细节原理所有元素设置float浮动之后,会脱离文档流 ...
CSS布局之float浮动
之前对CSS的浮动布局总是一知半解,最近开发中用的多了,对它的用法进行一些总结,以便以后忘记时可以查到.哈哈,别说我记性不好,我可是说真的,毕竟前端的知识实在是多而杂,多做笔记,遇到问题时网上搜索资料 ...
CSS 学习-1. Float(浮动)
前言 CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),用在图片附近可以实现文字环绕的效果,也可以使用在布局上. Float 浮动什么是浮动?浮 ...
CSS中，float浮动的理解
浮动什么意思呢,比如,默认的,我们知道,div是占满一行的,现在我们想把两个div显示在一行上,那怎么办呢 <div style="width:100px;">1111 ...
CSS布局讲解-float浮动布局使用
我们在讲解float之前,需要大家理解一个东西-标准文档流什么是标准文档流呢?宏观地讲,我们的web页面和photoshop等设计软件有本质的区别:web页面的制作,是个"流", ...
CSS——灵活布局 float (浮动属性)
目录浮动概述浮动定位 float属性 clear属性 float与overfloat 第一部分 1. 浮动概述浮动定位是指(特点) - 将元素排除在普通流之外,即元素将脱离标准文档流 - 元素将 ...
CSS基础学习--16 Float(浮动)
一.定义 CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像,但它在布局时一样非常有用. 元素的水平方向浮动,意味着元素只能左右移动 ...
html中左浮动怎么写,div css float浮动用法(left right)
div+css中float认识及css float用法,DIV CSS float浮动知识用法与float浮动教程篇 Css样式的float浮动属性,用于设置标签对象(如: 标签盒子.标签.标签.标签 ...

Css margin 和 float浮动

1.浮动:

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

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

float四大特性:

1.浮动的元素脱标

2.浮动的元素互相贴靠

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

4.收缩的效果

浮动的元素脱标

html

css

浮动的元素互相贴靠

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

收缩的效果

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

Css margin 和 float浮动相关推荐

最新文章

热门文章