這篇筆記的目的是記錄分別應(yīng)用float和flex布局的方法。主要是對遇到的問題進行總結(jié)。

1.float布局

nav.png

總結(jié)：
1.1 使用float布局要清除浮動，清除的方法是，在父元素添加如下樣式

.clearfix::after {
            content: '';
            display: block;
            clear: both;
        }
 .clearfix{
            zoom: 1;/*兼容ie6*/
        }

1.2 布局元素（本文布局元素指的是使用float布局的元素）就單純的做布局，不要再加任何別的樣式，否則會產(chǎn)生一些意想不到的的問題?？梢越o布局元素添加子元素，然后對子元素添加樣式。

1.3 如果沒必要就別給元素的寬度和高度一個固定的值，可以通過給元素添加padding/line-height調(diào)整高度。寬度可以通過比例來決定。

aver.png

在實現(xiàn)平均布局的時候，因為每個元素之間會有margin所以就會產(chǎn)生子元素的寬度總和大于父元素的寬度，就會產(chǎn)生換行，無法實現(xiàn)一行四個一樣大小格子的布局。解決的辦法

第一種方法：讓父元素左右兩邊往外擴大一定的大小，根據(jù)margin值決定或是讓靠父元素左邊

第二種方法：右邊的子元素margin為0。

第一種解決方法。在原先的子元素外面添加一個父元素div，然后給這個父元素添加如下樣式。

.wrapper{
    margin-left: -4px;
    margin-right: -4px;
}

第二種方法

.picture:nth-child(4n+1){
    margin-left: 0;
}
.picture:nth-child(4n){
    margin-right: 0; 
} 

2. flex布局
   flex布局參考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

布局效果圖.png

代碼

<div class="parent clearfix">
        <div class="child">logo</div>
        <div class="child">
            <div class="nav clearfix">
                <div class="item">導(dǎo)航1</div>
                <div class="item">導(dǎo)航2</div>
                <div class="item">導(dǎo)航3</div>
                <div class="item">導(dǎo)航4</div>
                <div class="item">導(dǎo)航5</div>
            </div>
        </div>
    </div>

    <div class="banner"></div>
    <div class="pictures">
        <div class="wrapper">
            <div class="picture"></div>
            <div class="picture"></div>
            <div class="picture"></div>
            <div class="picture"></div>
            <div class="picture"></div>
            <div class="picture"></div>
            <div class="picture"></div>
            <div class="picture"></div>
        </div>
    </div>

    <div class="art clearfix">
        <div class="sider">
            <div class="sider-child">廣告1</div>
        </div>
        <div class="main">
            <div class="main-child">廣告2</div>
        </div>
    </div>

css

*{
    box-sizing: border-box;
}
.parent{
    margin-left: auto;
    margin-right: auto;
    background: #ddd;
    min-width: 600px;
}
.clearfix::after {
    content: '';
    display: block;
    clear: both;
}
.clearfix{
    zoom: 1;/*ie6*/
}
.child {
    color: white;
}
.child:nth-child(1) {
    float: left;
    width: 10%;
    text-align: center;
    line-height: 24px;
    padding: 6px 0;
    background-color: #533;
}

.child:nth-child(2) {
    float: right;
}

.nav{
    line-height: 24px;
    padding: 6px 0;
}

.item {
    float: left;
    margin-left: 20px;
}

.banner{
    width: 800px;
    height: 300px;
    background: #888;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}
.pictures{
    width: 800px;
    margin: 0 auto;
}
.pictures>.wrapper{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -4px;
}
.picture{
    width: calc(25% - 8px);/*calc兩個值之間要有空格*/
    height: 194px;
    background: #d5d;
    margin: 4px;
}

.art{
    background: #ddd;
    width: 800px;
    margin: 0 auto;
}
.art>.sider{
    float: left;
    width: 33.33%;
}
.art>.main{
    float: left;
    border: 1px solid black;
    width: 66.66%;
    height: 300px;
}

.sider-child{
    margin-right: 20px;
    border: 1px solid black;
    height: 300px;
}