1.浮动基础
两列布局
①两列布局:两个盒子都设置了左浮动,就会出现在同一行。
②两个盒子的宽度之和不能超过页面的宽度,如果超过了,第二个盒子就会出现在第二行。
③因为在一行内,想要容纳两个盒子,就必须小于总宽度。
④如果只有一个盒子的话,盒子宽度超过页面宽度,就会增加页面宽度。
浮动(float)
float属性:
左浮动 (left)
右浮动(right)
上浮动(top)
下浮动 (bottom)
…
清除浮动(clear)
①clear的意思:清除浮动。
②clear属性:
left(清除左侧浮动)
right(清除右侧浮动)
both(清除左右两侧的浮动)
none(默认值,允许两侧有浮动)
inherit(从父元素继承clear属性的值)
③clear的用处:可以解决浮动元素的塌陷。
例如一个父元素包含了浮动元素,它将会塌陷,解决方法如下。
①在浮动元素后加个div设置clear: both; height:0;
②使用clearfix; 这个方法要添加.clearfix{zoom1;}
③设置父元素浮动
④浮动元素由于脱离了普通的文档流,不再占用原来文档中的位置,因此无法把父元素撑开。
伪元素
①在类选择器后面可以加上:after,例如.clear :after{ }
②伪元素:对一个看不到的元素进行浮动清除 。
2.浮动案例
float.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
</head