前言
更多参考
正文
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;}