百度前端学习日记05——页面布局（一）浮动

前言

更多参考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;
}