2018-01-05-WEB预习-布局-浮动

浮动

块元素在文档流中都是上下排列的。
想要让其左右排列：

方法一：设定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>

2018-01-05-WEB预习-布局-浮动

浮动

高度塌陷

高度塌陷的终极方案

导航条实现

推荐阅读更多精彩内容