文章目录

作用
使用
浮动修改盒子模型水平布局
设置float之后或从文档流中脱离
浮动的特点
- 1、浮动元素会完全脱离文档流，不再占据文档流中的位置
- 2、设置浮动以后元素会向父元素的左侧或右侧移动，并且浮动元素默认==不会从父元素中移出==
- 3、浮动元素只能左右移动，只是如果放不下会换行。
- 4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素。（横向特点）
- 5、浮动元素不会超过在它前面先浮动的兄弟元素,最多就是和它一样高。（纵向特点）
- 6、如果浮动元素的上边是一个没有浮动的==块元素==，则浮动元素==无法上移，只能在下一行开始浮动==。
- 7、浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围,我们可以利用浮动来设置文字环绕图片的效果。
- 8.浮动后（脱离文档流后）元素的特点
- - 块元素:
  - 行内元素
浮动目的总结:

作用

通过浮动可以使一个元素向其父元素的左侧或右侧移动
使用 float属性来设置于元素的浮动

使用

float的可选值:

none默认值，元素不浮动
left 元素向左浮动
right元素向右浮动
eg：

      .box1{width: 200px;height: 200px;background-color: rgb(235, 180, 180);float: right;}

浮动修改盒子模型水平布局

注意：元素设置浮动以后，水平布局的等式（mangin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度）便不需要强制成立，写多少就是多少。
eg：设置浮动前：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>.box1{width: 200px;height: 200px;background-color: rgb(235, 180, 180);}</style>
</head>
<body><div class="box1"></div>
</body>
</html>

设置： float: left;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>.box1{width: 200px;height: 200px;background-color: rgb(235, 180, 180);float: left;}</style>
</head>
<body><div class="box1"></div>
</body>
</html>

设置float之后或从文档流中脱离

按上面的思路，如果再设置一个box2,那么box2就会在box1的右边，而不是下面。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>.box1{width: 200px;height: 200px;background-color: rgb(235, 180, 180);float: left;}.box2{width: 200px;height: 200px;background-color:rgb(219, 243, 154);}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>

但是结果却是：

box2不是消失不见而是被box1遮住了，这是因为：
元素设置浮动以后,会完全从文档流中脱离，不再占用文档流的位置，此时还在文档流中的元素会自动向上移动。box2就移动到了box1之前的位置，box1又脱离文档流，在文档流的上面，所以box1就会覆盖box2。
如果想要设置两个div在同一行并列排序，只需要两个都设置成float：left
eg：

eg：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>.box1{width: 200px;height: 200px;background-color: rgb(235, 180, 180);float: left;}.box2{width: 200px;height: 200px;background-color:rgb(243, 242, 154);float: left;}</style><script></script>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>

输出：

浮动的特点

1、浮动元素会完全脱离文档流，不再占据文档流中的位置

2、设置浮动以后元素会向父元素的左侧或右侧移动，并且浮动元素默认不会从父元素中移出

3、浮动元素只能左右移动，只是如果放不下会换行。

4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素。（横向特点）

5、浮动元素不会超过在它前面先浮动的兄弟元素,最多就是和它一样高。（纵向特点）

eg：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>.box1{width: 400px;height: 200px;background-color: rgb(235, 180, 180);float: left;}.box2{width: 400px;height: 200px;background-color:rgb(243, 242, 154);float: left;}.box3{width: 200px;height: 200px;background-color:rgb(164, 243, 154);float: right;}</style><script></script>
</head>
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div>
</body>
</html>

6、如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移，只能在下一行开始浮动。

（不是想在哪浮动就在哪浮动的）
就是说，如果块元素先定义，块元素上不能浮动元素；但是如果浮动元素先定义，浮动元素下面还可以在放块元素。
eg：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" href="reset.css"><style>.box1{width: 200px;height: 200px;background-color: rgb(235, 180, 180);}.box2{width: 200px;height: 200px;background-color:rgb(243, 242, 154);float: left;}.box3{width: 200px;height: 200px;background-color:rgb(164, 243, 154);float: right;}.box4{width:400px;height: 400px;background-color: rgb(180, 186, 235);}</style></head>
<body><div class="box1">未浮动的块元素</div><div class="box2">浮动的块元素</div><div class="box3">浮动的块元素</div><div class="box4"><p>未浮动的块元素</p></div>
</body>
</html>

这里发现box4的文字没有被浮动元素遮住，这就引入了浮动的另一个特点。

7、浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围,我们可以利用浮动来设置文字环绕图片的效果。

（其实这是浮动设计的最初目的）
eg：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>.box1{width: 200px;height: 200px;background-color: rgb(235, 180, 180);float: left;}</style>
</head>
<body><div class="box1"></div><p>。所谓回忆者，虽说可以使人欢欣，有时也不免使人寂寞，使精神的丝缕还牵着已逝的寂寞的时光，又有什么意味呢，而我偏苦于不能全忘却，这不能全忘的一部分，到现在便成了《呐喊》的来由。”“我感到未尝经验的无聊，是自此以后的事。我当初是不知其所以然的;后来想，凡有一人的主张，得了赞和，是促其前进的，得了反对，是促其奋斗的，独有叫喊于生人中，而生人并无反应，既非赞同，也无反对，如置身毫无边际的荒原，无可措手的了，这是怎样的悲哀呵，我于是以我所感到者为寂寞。”“是的，我虽然自有我的确信，然而说到希望，却是不能抹杀的，因为希望是在于将来，决不能以我之必无的证明，来折服了他之所谓可有，于是我终于答应他也做文章了，这便是最初的一篇《狂人日记》。”“在我自己，本以为现在是已经并非一个切迫而不能已于言的人了，但或者也还未能忘怀于当日自己的寂寞的悲哀罢，所以有时候仍不免呐喊几声，聊以慰藉那在寂寞里奔驰的猛士，使他不惮于前驱。至于我的喊声是勇猛或是悲哀，是可憎或是可笑，那倒是不暇顾及的;但既然是呐喊，则当然须听将令的了，所以我往往不恤用了曲笔，在《药》的瑜儿的坟上平空添上一个花环，在《明天》里也不叙单四嫂子竟没有做到看见儿子的梦，因为那时的主将是不主张消极的。至于自己，却也并不愿将自以为苦的寂寞，再来传染给也如我那年青时候似的正做着好梦的青年。”</p>
</body>
</html>

即使文字所在的容器被浮动元素完全盖住，容器中的文字也会环绕在浮动元素周围。
eg：
没有设置浮动元素之前：

设置浮动元素之后：

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" href="reset.css"><style>.box1{width: 200px;height: 200px;background-color: rgb(235, 180, 180);}.box2{width: 200px;height: 200px;background-color:rgb(243, 242, 154);float: left;}.box3{width: 200px;height: 200px;background-color:rgb(164, 243, 154);float: right;}.box4{width:200px;height: 200px;background-color: rgb(180, 186, 235);}</style></head>
<body><div class="box1">未浮动的块元素</div><div class="box2">浮动的块元素</div><!-- <div class="box3">浮动的块元素</div> --><div class="box4"><span>未浮动的块元素</span></div>
</body>
</html>

8.浮动后（脱离文档流后）元素的特点

元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化。
下面的是脱离文档流的特点，只要脱离文档流就会有的特点，不一定是浮动才有的。

块元素:

1、块元素不再独占页面的一行
2、如果没有设置宽度和高度，脱离文档流以后,块元素的宽度和高度默认都被内容撑开
3、如果设置了宽度和高度，就按设置的来。

eg：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>.box1{background-color: rgb(255, 242, 125);float: left;}.box2{background-color: salmon;}.box3{background-color: rgb(155, 181, 236);width: 100px;height: 100px;float: left;}</style>
</head>
<body><div class="box1">hello我是浮动元素1</div><div class="box3">hello我是浮动元素2</div><div class="box2">hello我是未浮动元素</div></body>
</html>

输出：

行内元素

行内元素脱离文档流以后会变成块元素，特点和块元素一样。
脱离文档流以后，不需要再区分块和行内了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>span{width: 100px;height: 100px;background-color: thistle;float: left;}</style>
</head>
<body><span>我是浮动后的行内元素</span></body>
</html>

浮动目的总结:

浮动主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局。

浮动的简介——CSS相关推荐

CSS入门篇10.浮动的简介与三个特点
浮动的简介块元素在文档流会独占一行,自上而下排列如果设置元素浮动,元素脱离文档流后,就不会具有在文档流中的特点 float: ; 设置元素的浮动可选值: none 默认值,元素正常显示,不浮 ...
智汇华云 | ArSDN之分布式路由及浮动IP简介
随着互联网.云计算.网络存储.物联网为代表的新应用.新运营模式的兴起,不仅带来流量的快速增长,更使得用户在建设多业务IP网络的同时,面临更加复杂的运维挑战以及对业务进行快速导入与部署的要求.本期智汇华 ...
将文字定位到浮动图片上|CSS
将文字定位到浮动图片上CSS 效果展示 <div class="remmend-item"><div class="image">< ...
css为什么要用浮动_3种CSS清除浮动的方法
点击上方 "前端技术精选" 关注,星标或者置顶 12点00分准时推送,第一时间送达作者:html中文网 | 编辑:前端妹来源:html.cn/web/css/19613.htm ...
html中的左浮动的作用,CSS浮动
float是css样式中的定位属性,用于设置标签对象(如: 标签盒子.标签.标签.标签等html标签)的浮动布局,浮动也就是我们所说标签对象浮动居左靠左(float:left)和浮动居右靠右(floa ...
CSS的浮动属性，CSS颜色基本样式
前言校招 -1 年这个阶段还属于成长期,更需要看重的是你的基础和热情.对于 JS 基础,计算机基础,网络通信,算法等部分的要求会相对高一些.毕竟这个阶段比较难考察你的业务项目中的沉淀,所以只能从基 ...
css浮动布局自适应,CSS | 自适应两栏布局方法
html代码: 固定宽度自适应区域 1.浮动+margin 第一种: 左侧栏固定宽度向左浮动,右侧主要内容则用margin-left留出左侧栏的宽度,默认宽度为auto,自动填满剩下的宽度. .le ...
php图片如何让浮动,页面中用css属性怎么控制图片自定义浮动？（示例）
新手在设计web页面时,偶尔就图片浮动的问题会产生一些困扰,不知从何下手.本篇文章主要就给大家介绍css浮动的相关知识,希望对需要的朋友有所帮助.首先这里就需要大家了解一下css中的一个重要属性浮动f ...
html 内部浮动外部不,CSS：外部层高度自适应内部浮动层高度的方法
为了节省时间,根据个人测试在浮动层的外部层里加入overflow:auto;zoom:1; 即可适应内部浮动层的高度,似乎没有以下说的那么复杂,这样做发现问题或有更好提议的同学,欢迎留言讨论. 以下为 ...

浮动的简介——CSS