25.html设置浮动（float属性）
⽂章⽬录
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>
cssclass属性
<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属性（脱离⽂档流）后，不需要再区分块元素和⾏内元素

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。