这篇笔记的目的是记录分别应用float和flex布局的方法。主要是对遇到的问题进行总结。
1.float布局
总结：
1.1 使用float布局要清除浮动，清除的方法是，在父元素添加如下样式
.clearfix::after { ???????????content: ‘‘; ???????????display: block; ???????????clear: both; ???????} .clearfix{ ???????????zoom: 1;/*兼容ie6*/ ???????}1.2 布局元素（本文布局元素指的是使用float布局的元素）就单纯的做布局，不要再加任何别的样式，否则会产生一些意想不到的的问题。可以给布局元素添加子元素，然后对子元素添加样式。
1.3 如果没必要就别给元素的宽度和高度一个固定的值，可以通过给元素添加padding/line-height调整高度。宽度可以通过比例来决定。
在实现平均布局的时候，因为每个元素之间会有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
代码
<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;}flex布局代码GitHub
CSS布局套路
原文地址：https://www.cnblogs.com/qfstudy/p/8973370.html