float
属性值有:left 左浮动
right:右浮动
none: 不设置浮动
inherit:从父元素继承float属性
含义:默认宽度为内容宽度
向指定方向一直移动
对后续block元素脱离文档流,对后续内容在文档流
可以使一个元素脱离正常的文档流,然后被安放在它所在容器的左端或右端,并且其他的文本和行内元素围绕它安放。
如果设置两个盒子,设置其大小后,会上下安放,
如果设置第一个盒子为左浮动,那么,两个盒子会发生覆盖,因为其对后续的文档流脱离
再设置第二个盒子也为左浮动,那么,将呈现下面的效果。
如果有三个盒子,想要呈现如下效果,那么就需要,在第三个盒子的样式中设置 clear:left;
clear 表示清除浮动,它的属性值有left,right,both,none,inherit。其意思顾名思义。
浮动会让元素塌陷。即被浮动元素的父元素不具有高度。例如一个父元素包含了浮动元素,它将塌陷具有零高度,那么解决办法有哪些呢·?
1.在浮动元素后加一个div,设置属性为clear:both;height:0;overflow:hidden;
2.使用clearfix;
3.设置父元素浮动。
个人拙见,有不对的希望大家提出来。