浮动
浮动
块元素在文档流中都是上下排列的。
想要让其左右排列：
- 方法一：设定display属性为inline-block，并且将几个块元素写在一行（去掉水平间隔）。
- 方法二：使用float来使元素浮动，从而脱离文档流。
- 可选值：none，默认值；
- left，元素会立即脱离文档流，向页面左侧浮动；
- right，元素会立即脱离文档流，向页面右侧浮动；
- 当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离文档流。其下面的元素会立即向上移动。
浮动元素比一般元素靠上层，会覆盖一般元素。
遇到 父元素边框，前一个浮动元素 停止浮动。
如果 浮动元素 上边是一个 没有浮动的块元素 ，中间是一堵墙。
一行中不够容下所有浮动元素，则自动换行
浮动的元素不会超过其上边的兄弟元素。
浮动的元素不会盖住文字，文字会自动环绕的浮动元素的周围。
故可以通过浮动实现文字环绕图片效果。
在文档流中，子元素的宽度默认占父元素的全部。
当元素设置浮动后，会完全脱离文档流，高度和宽度默认被内容撑开（没有内容则没有高度宽度）
一旦脱离文档流，就不再区分 块元素与内联元素。（宽高都被内容撑开）
综合块元素和内联元素的特点：不独占一行（内联元素），可设置宽高（块元素）
高度塌陷
高度塌陷
子元素设为浮动后将无法再撑开父元素。
开启BFC（BlockFormattingContext）
- 设置父元素为浮动（会导致父元素宽度丢失，下边元素上移）
- 设置元素绝对定位
- 设置父元素为inline-block（会导致宽度丢失）
- 将父元素的overflow设置为hidden（副作用最小）。
hasLayout
IE6中没有BFC，但有另一个隐含属性hasLayout可解决高度塌陷问题。
开启方式很多：
- 副作用最小的的方式，zoom属性设为1。（放大倍数为1，即不变）
- 一旦设置了宽度，也会默认开启hasLayout。
为了浏览器兼容，一般写两个。（BFC+hasLayout）
高度塌陷的终极方案
有时希望清除掉其它元素浮动时对当前元素产生的影响，这时可以使用clear来清除其它浮动对当前元素的影响。
可选值：
- none，默认值；
- left，清除左侧浮动元素对当前元素的影响；
- right，清除右侧浮动元素对当前元素的影响；
- both，清除两侧浮动元素对当前元素的影响。（影响大的那一侧）
导航条实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航条</title>
<style type="text/css">
/*
* 清除默认样式
*/
*{
margin:0;
padding:0;
}
/*
* 设置ul
*/
.nav{
/*去除项目符号*/
list-style: none;
/*为ul设置一个背景颜色*/
background-color: #6495ED;
/*设置一个宽度*/
/*
* 在IE6中，如果为元素指定了一个宽度，则会默认开启hasLayout
*/
width: 1000px;
/*设置元素居中*/
margin: 50px auto;
/*解决高度塌陷*/
overflow: hidden;
}
/**
* 设置li
*/
.nav li{
/*设置li向左浮动*/
float: left;
width: 12.5%;
}
.nav a{
/*将a转换为块元素*/
display: block;
/*为a指定一个宽度*/
width: 100%;
/*设置文字居中*/
text-align: center;
/*设置一个上下内边距*/
padding: 5px 0;
/*去除下划线*/
text-decoration: none;
/*设置字体颜色*/
color: white;
/*设置加粗*/
font-weight: bold;
}
/*
* 设置a的鼠标移入的效果
*/
.nav a:hover{
background-color: #c00;
}
</style>
</head>
<body>
<!-- 创建导航条的结构 -->
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>
