前言
更多参考MDN
正文
1.浮动概念
最初,引入 float 属性是为了能让 web 开发人员实现简单的布局,包括在一列文本中浮动的图像,文字环绕在它的左边或右边。你可能在报纸版面上看到过。
举例给图片设置float:left
img { float: left; margin-right: 30px; }
2.浮动的破坏性
首先了解被设置了float的元素会脱离文档流。
举例
3.清除浮动
clear属性
值 left,right,both
4.浮动布局
a.两列布局
.div1{ float:left;
width:48% } .div2{ float:right;
width:48%;
}
b.三列布局
div:nth-of-type(1) { width: 36%; float: left; } div:nth-of-type(2) { width: 30%; float: left; margin-left: 4%; } div:nth-of-type(3) { width: 26%; float: right; }