文章目录
html设置浮动（float属性）
浮动的简介
浮动其他的特点
1.不会盖住文字
2.脱离文档流特点
html设置浮动（float属性）
浮动的简介
float属性：通过浮动可以使一个元素向父元素的左侧或右侧移动
可选值（部分）：
①none；默认值，不浮动
②left；元素向左浮动
③right；元素向右浮动
注意：
1.元素设置浮动以后，水平布局的等式便不需要强制成立了。
2.元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，因此，元素下边还在文档流中的元素会自动向上移动。
3.浮动元素向左向右移动时，不会超过他前边的其他浮动元素
众所周知，div是一個块元素，如果两个div放在一起的话，肯定会各占一行。但是如果设置了float:left的话，我们就可以顺利让他们靠在一起了，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bbffaa;
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
显示如下：
当然有人可能会想，也可以把他们的display设置成inline啊，这里给出设置成inline后的显示效果：（你没看错就是啥都没有）
可能有人又会说了，傻X，那inline不行，inline-block行不行啊，好吧，还真行，设置后显示如下：
如果，我们只给一个设置box1设置flex，不给box2设置会怎么样呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bbffaa;
float: left;
}
.box2{
width: 300px;
height: 300px;
background-color: orange;
/*float: left;*/
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
显示
可见，上面的注意第二点显现出来了，box1脱离了文档流，box2直接从box1的位置开始摆放。
浮动其他的特点
1.不会盖住文字
浮动元素不会盖住文字，文字会自动环绕在浮动元素周围，所以我们可以用其设置文字浮动效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动的其他特点</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
.box1{
width: 100px;
height: 100px;
background-color: #bbffaa;
float: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<p>我常想在纷扰中寻出一点闲静来，然而委实不容易。目前是这么离奇，心里是这么芜杂。一个人做到只剩了回忆的时候，生涯大概总要算是无聊了罢，但有时竟会连回忆也没有。中国的做文章有轨范，世事也仍然是螺旋。前几天我离开中山大学的时候，便想起四个月以前的离开厦门大学；听到飞机在头上鸣叫，竟记得了一年前在北京城上日日旋绕的飞机。我那时还做了一篇短文，叫做《一觉》。现在是，连这“一觉”也没有了。广州的天气热得真早，夕阳从西窗射入，逼得人只能勉强穿一件单衣。书桌上的一盆“水横枝”，是我先前没有见过的：就是一段树，只要浸在水中，枝叶便青葱得可爱。看看绿叶，编编旧稿，总算也在做一点事。做着这等事，真是虽生之日，犹死之年，很可以驱除炎热的。前天，已将《野草》编定了；这回便轮到陆续载在《莽原》上的《旧事重提》，我还替他改了一个名称：《朝花夕拾》。带露折花，色香自然要好得多，但是我不能够。便是现在心目中的离奇和芜杂，我也还不能使他即刻幻化，转成离奇和芜杂的文章。或者，他日仰看流云时，会在我的眼前一闪烁罢。我有一时，曾经屡次忆起儿时在故乡所吃的蔬果：菱角，罗汉豆，茭白，香瓜。凡这些，都是极其鲜美可口的；都曾是使我思乡的蛊惑。后来，我在久别之后尝到了，也不过如此；惟独在记忆上，还有旧来的意味留存。他们也许要哄骗我一生，使我时时反顾。这十篇就是从记忆中抄出来的，与实际容或有些不同，然而我现在只记得是这样。文体大概很杂乱，因为是或作或辍，经了九个月之多。环境也不一：前两篇写于北京寓所的东壁下；中三篇是流离中所作，地方是医院和木匠房；后五篇却在厦门大学的图书馆的楼上，已经是被学者们挤出集团之后了。一九二七年五月一日，鲁迅于广州白云楼记。</p>
</body>
</html>
显示：
2.脱离文档流特点
2-1块元素不会独占一行，宽高被内容撑开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动的其他特点</title> <link rel="stylesheet" href="../css/reset.css"> <style> .box1{ /*width: 100px;*/ /*height: 100px;*/ background-color: #bbffaa; float: left; }
.box2{ background-color: orange; } </style> </head> <body> <div class="box1">I'm box1,And you?</div> <div class="box2">Hello box1,I'm box2.</div> </body> </html>
显示：
2-2行内元素会变成块元素，特点和块元素一样
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动的其他特点</title> <link rel="stylesheet" href="../css/reset.css"> <style> .box1{ width: 100px; height: 100px; background-color: #bbffaa; float: left; }
.box2{ background-color: orange; }
.s1{ width: 100px; height: 100px; background-color: yellowgreen; float: left; } </style> </head> <body> <!-- <div class="box1">I'm box1,And you?</div>--> <!-- <div class="box2">Hello box1,I'm box2.</div>--> <span class="s1">My name is span.</span>
</body> </html>
显示：
简单说：使用float属性（脱离文档流）后，不需要再区分块元素和行内元素
