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属性(脱离文档流)后,不需要再区分块元素和行内元素