CSS - float 布局

float 布局

---

可以兼容 IE 9 浏览器

float : left;
float : right;

步骤

1. 子元素上加float : left和 width；
2. 在父元素上加 .clearfix。

		.clearfix:after {	
 			 display: block;
 			 content: " ";
 			 clear: both;		 
		}

注意

1. 有经验者会留一些空间或者最后一个不设 width；

2. 不需要做响应式，因为手机上没有 IE ，而这个布局是专门为 IE 准备的;

3. IE 6 / 7 存在双倍 margin bug , 解决办法有两个

   • 将错就错，针对 IE 6 / 7 把 margin 减半；
   • 再加一个 display : inline-block

flex 布局

---

不兼容最新的浏览器

grid 布局

---

兼容最新的浏览器！！