文章目錄

一、浮動及應用

1.1 文檔流

1.2 浮動

1.2.1 浮動含義

1.2.2 浮動特性對齊父盒子

        .father {
            width: 500px;
            height: 300px;
            background-color: pink;
            border: 10px solid red;
            padding: 10px;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
            float: right;
        }

    <div class="father">
        <div class="son"></div>
    </div>

1.2.3 浮動特性盒子排列

1.3 版心和佈局流程

版心：

佈局流程：

1.3.1 一列固定寬度且居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .top,
        .banner,
        .main,
        .footer {
            width: 960px;    
            margin: 0 auto;
            text-align: center;
            margin-bottom: 10px;
            border: 1px dashed #ccc;
        }
        .top {
            height: 80px;
            background-color: pink;
        }
        .banner {            
            height: 120px;
            background-color: purple;       
        }
        .main {        
            height: 500px;
            background-color: hotpink;       
        }
        .footer {         
            height: 150px;
            background-color: black;    
        }
    </style>
</head>
<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="main">main</div>
    <div class="footer">footer</div>
</body>
</html>

1.3.2 兩列左窄右寬型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .top,
        .banner,
        .main,
        .footer {
            width: 960px;
            margin: 0 auto;
            text-align: center;
            border: 1px dashed #ccc;            
            background-color: #eee;
            margin-bottom: 8px;
        }
        .top {
            height: 80px;
        }
        .banner {
            height: 150px;
        }
        .main {
            height: 500px;
        }
        .left  {
            width: 360px;
            height: 500px;
            background-color: pink;
            float: left;
        }
        .right {
            width: 590px;
            height: 500px;
            background-color: purple;
            float: right;                                           
        }
        .footer {
            height: 120px;
        }
    </style>
</head>
<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="main">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>
</html>

1.3.3 通欄平均分佈型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .top {
            height: 80px;
            border: 1px dashed #aaa;
            background-color: #eee;
        }

        .banner {
            width: 960px;
            height: 150px;
            border: 1px dashed #aaa;
            background-color: #eee;            
            margin: 10px auto;           
        }

        .small {
            width: 960px;
            height: 100px;
            margin: 0 auto;
            /* background-color: pink; */
        }
        ul {
            list-style: none;
        }
        .small ul li {
            width: 230px;
            height: 100px;
            border: 1px dashed #aaa;
            background-color: #eee;
            float: left;
            margin-left: 10px;
        }
        .small .nomargin {
            margin-left: 0;
        }

        .big {
            width: 960px;
            height: 150px;
            margin: 10px auto;
            /* background-color: pink; */
        }
        .big ul li {
            width: 230px;
            height: 150px;
            border: 1px dashed #aaa;
            background-color: #eee;
            float: left;
            margin-left: 10px;            
        }
        .big .nomargin {
            margin-left: 0;
        }
        .footer {
            height: 120px;
            border: 1px dashed #aaa;
            background-color: #eee;      
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="banner"></div>
    <div class="small">
        <ul>
            <li class="nomargin">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>  
    <div class="big">
        <ul>
            <li class="nomargin">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>  
    <div class="footer"></div>
</body>
</html>

二、清除浮動

2.1 清除浮動的本質

2.2 清除浮動的方法

2.2.1 額外標籤法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 600px;
            background-color: pink;
        }
        .son1 {
            width: 150px;
            height: 100px;
            background-color: skyblue;
            float: left;
        }
        .son2 {
            width: 300px;
            height: 100px;
            background-color: hotpink;
            float: left;
        }
        .box2 {
            width: 600px;
            height: 240px;
            background-color: purple;
        }
        /* 清除浮動 */
        .clear {
            clear: both; 
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="clear"></div> <!-- 加一個空標籤 -->
    </div>
    <div class="box2"></div>
</body>
</html>

2.2.2 父級添加overflow屬性方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 600px;
            background-color: pink;
            overflow: hidden; /* 觸發BFC，清除浮動 */
        }
        .son1 {
            width: 150px;
            height: 100px;
            background-color: skyblue;
            float: left;
        }
        .son2 {
            width: 300px;
            height: 100px;
            background-color: hotpink;
            float: left;
        }
        .box2 {
            width: 600px;
            height: 240px;
            background-color: purple;
        }       
    </style>
</head>
<body>
    <div class="box1">
        <div class="son1"></div>
        <div class="son2"></div>        
    </div>
    <div class="box2"></div>
</body>
</html>

2.2.3 使用after僞元素清除浮動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 600px;
            background-color: pink;
            overflow: hidden; /* 觸發BFC，清除浮動 */
        }
        .son1 {
            width: 150px;
            height: 100px;
            background-color: skyblue;
            float: left;
        }
        .son2 {
            width: 300px;
            height: 100px;
            background-color: hotpink;
            float: left;
        }
        .box2 {
            width: 600px;
            height: 240px;
            background-color: purple;
        }   
        /* 清除浮動 */
        .clearfix:after {
            display: block;
            content: ".";
            height: 0;
            visibility: hidden;
            clear: both;
        }    
        .clearfix {
            *zoom: 1; /* *代表IE6,7能識別的符號 */
        }
    </style>
</head>
<body>
    <div class="box1 clearfix"> <!-- clearfix -->
        <div class="son1"></div>
        <div class="son2"></div>        
    </div>
    <div class="box2"></div>
</body>
</html>

2.2.4 使用before和after雙僞元素清除浮動☆☆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 600px;
            background-color: pink;
            overflow: hidden; /* 觸發BFC，清除浮動 */
        }
        .son1 {
            width: 150px;
            height: 100px;
            background-color: skyblue;
            float: left;
        }
        .son2 {
            width: 300px;
            height: 100px;
            background-color: hotpink;
            float: left;
        }
        .box2 {
            width: 600px;
            height: 240px;
            background-color: purple;
        }   
        /* 清除浮動 */
        .clearfix:before,.clearfix:after {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }
    </style>
</head>
<body>
    <div class="box1 clearfix"> <!-- clearfix -->
        <div class="son1"></div>
        <div class="son2"></div>        
    </div>
    <div class="box2"></div>
</body>
</html>