CSS3基础教程(十二)

1.什么是浮动(float)

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。设置了浮动属性的元素会脱离普通标准流的控制，移动到其父元素中指定的位置的过程，将块级元素放在一行，浮动会脱离标准流，不占位置，会影响标准流，浮动只有左右浮动，不会出现上下浮动。

浮动的方向有： - left - 向左浮动 - right - 向右浮动 - none - 不浮动 - inherit - 继承

清除浮动可以使用clear,清除方式有： - left 在左侧不允许浮动元素。 - right 在右侧不允许浮动元素。 - both 在左右两侧均不允许浮动元素。 - none 默认值。允许浮动元素出现在两侧。 - inherit 规定应该从父元素继承 clear 属性的值。

2.浮动元素的特性

1)浮动的元素脱离了标准文档流，摆脱块级元素和行内元素的限制,所以说浮动是魔鬼，会影响其它元素的位置。

2)浮动的元素存在相互贴靠的效果，当宽度不够的时候，会出现自动换行。

3)浮动的元素虽然脱离了标准文档流，但是没有脱离文本流，出现图文环绕的效果。 4)浮动之后的元素会存在收缩的效果，当一个块级元素没有设置宽度的时，当块级元素浮动之后，就会失去高度。

5)当父元素不设置高度的时候，多个子元素的高度和撑起了父元素的高度；当设置浮动后，子元素最高的高度撑起了父元素的高度。

3.浮动的弊端 1. 导致高度塌陷，当子元素同时设置浮动后，父元素失去支撑，父元素的高度消失，缩成一条线。解决办法：在父元素失去高度，发生塌陷之后，可以给父元素添加高度或者设置overflow:hidden的方法进行解决高度塌陷的问题。 2. 页面结构的不稳定性，子元素浮动，导致标准文档流出现空白区域。解决办法：clear:both; 去进行解决，这也是称之为隔墙法。

4.浮动综合实例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            margin: 0px auto;
            text-align: center;
        }

        .main{
            width:400px;
            height:400px;
            background-color:#CFF;

        }
        .inner{
            width:100px;
            height:100px;
            line-height:100px;

        }
        #div1{
            background-color:#FF9;
            float:left;

        }
        #div2{
            background-color:#ccf;
            float:right;
            clear:left;
        }

        #div3{
            background-color:#CCC;

        }
        #div4{
            background-color:#F9C;

        }
    </style>
</head>
<body>

<div class="main">
    <div class="inner" id="div1">
        我是DIV1
    </div>
    <div class="inner" id="div2">
        我是DIV2
    </div>
    <div class="inner" id="div3">
        我是DIV3
    </div>
    <div class="inner" id="div4">
        我是DIV4
    </div>
</div>

</body>
</html>

运行效果：

使用浮动实现把无序列表转换为导航栏效果。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        h1{
            text-align: center;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        ul{
            width: 400px;
            margin: 0px auto;
        }
        li{
            float: left;
            margin-right: 50px;
        }
    </style>
</head>
<body>
<h1>使用浮动实现导航栏效果</h1>
<hr>
<ul>
    <li><a href="https://www.tmall.com">天猫网</a></li>
    <li><a href="https://www.jd.com">京东</a></li>
    <li><a href="https://www.taobao.com">淘宝</a></li>
    <li><a href="https://www.suning.com">苏宁易购</a></li>
</ul>

</body>
</html>