浮动的简介
- 通过浮动可以使一个元素向其父元素的左侧或右侧移动
- 使用 float 属性来设置元素的浮动
– 可选值:
– none 默认值,无浮动
– left 元素向左浮动
– right 元素向右浮动
注意:
- 元素设置浮动之后,水平布局的等式便不需要强制成立(即块元素没有了右外边距)
- 元素设置浮动之后,会完全从文档流中脱离,不在占用文档流的位置,所以元素下边的其他存在于文档流中的元素会自动上移。
浮动的特点
- 浮动元素会完全脱离文档,不再占据文档流中的位置
- 设置浮动以后元素会向父元素的左侧或右侧移动
- 浮动元素默认不会从父元素中溢出
- 浮动元素向左或向右移动,不会超过它之前的其他元素
- 如果浮动元素的上一个元素是没有移动的块元素,则浮动元素无法上移
- 浮动元素不会超过它上一个的浮动的兄弟元素,最多与之相等
总结: 浮动目前的主要作用时让页面元素的可以水平排列,通过浮动可以制作一些水平方向的布局。
浮动的其他特点、脱离文档流的特点
- 浮动元素不会覆盖文字,文字会自动环绕在浮动元素的周围
- 可以利用浮动来设置文字环绕图片的效果
元素设置浮动以后,将会从文档流中脱离,从文档流中脱离后,元素的一些特点也会改变:
脱离文档流的特点:
块元素:
1、块元素不会独占页面的一行
2、脱离文档流后,块元素的宽度和高度默认都被内容撑开
行内元素:
1、行内元素脱离文档流后会变成块元素,特点和脱离文档流的块元素一样
练习:
导航栏
<head>
<meta charset="UTF-8">
<title>导航条练习</title>
<link rel="stylesheet" href="./css/reset.css">
<style>
a {
/* 将 a 转换为块元素,即可设置宽高 ,自动填满 li 的宽高 */
display: block;
text-decoration: none;
font-size: 18px;
color: #777777;
/* 将 a 中的文字居中 */
padding: 0 39.85px;
}
li a:hover {
background-color: #3f3f3f;
color: #e8e7e3;
}
.nav {
width: 1210px;
height: 48px;
margin: 50px 0 0 12px;
}
.menu{
width: 1210px;
height: 48px;
background-color: #e8e7e3;
}
li {
/* 使 li 占满整个 div */
line-height: 48px;
float: left;
}
</style>
</head>
<body>
<div class="nav">
<ul class="menu">
<li id="h">
<a href="javascrippt:;">HTML/CSS</a>
</li>
<li id="b">
<a href="javascrippt:;">Browser Side</a>
</li>
<li id="s">
<a href="javascrippt:;">Sever Side</a>
</li>
<li id="p">
<a href="javascrippt:;">Programming</a>
</li>
<li id="x">
<a href="javascrippt:;">XML</a>
</li>
<li id="w">
<a href="javascrippt:;">Web Building</a>
</li>
<li id="r">
<a href="javascrippt:;">Reference</a>
</li>
</ul>
</div>
</body>
效果展示: