这篇笔记的目的是记录分别应用float和flex布局的方法。主要是对遇到的问题进行总结。
1.float布局
nav.png
总结：
1.1 使用float布局要清除浮动，清除的方法是，在父元素添加如下样式
.clearfix::after {
content: '';
display: block;
clear: both;
}
.clearfix{
zoom: 1;/*兼容ie6*/
}
1.2 布局元素（本文布局元素指的是使用float布局的元素）就单纯的做布局，不要再加任何别的样式，否则会产生一些意想不到的的问题。可以给布局元素添加子元素，然后对子元素添加样式。
1.3 如果没必要就别给元素的宽度和高度一个固定的值，可以通过给元素添加padding/line-height调整高度。宽度可以通过比例来决定。
aver.png
在实现平均布局的时候，因为每个元素之间会有margin所以就会产生子元素的宽度总和大于父元素的宽度，就会产生换行，无法实现一行四个一样大小格子的布局。解决的办法
第一种方法：让父元素左右两边往外扩大一定的大小，根据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;
}
- 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">导航1</div>
<div class="item">导航2</div>
<div class="item">导航3</div>
<div class="item">导航4</div>
<div class="item">导航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;
}
