1

浮动框不占文档位置

clear规定元素的哪一侧不允许其他浮动元素

清除浮动的操作

div 浮动

浮动属性：left 向左浮动，right向右浮动，

只设置box1,box1会遮挡box2的一部分，原因：浮动框脱离了普通的文档流， 不在占据普通文档流的位置，就像漂浮在文档流之上。

两个盒子的宽度不能超过整个页面的宽度

clear  清除浮动

left  在左侧不允许浮动元素

right 在右侧不允许浮动元素

both 在左右两侧不允许浮动元素

none 默认值 。允许浮动元素出现在两侧

inherit   规定应该父元素继承clear属性的值

关于清除浮动

当一个元素设置了clear:left清除浮动样式之后，它将会忽略那些设置了浮动样式的元素并把它们视为普通文档流来进行排序。

关于清除浮动

当一个元素设置了clear:left清除浮动样式之后，它将会忽略那些设置了浮动样式的元素并把它们视为普通文档流来进行排序。

一个元素设置了浮动样式后，会影响它的兄弟元素，至于如何影响，要看它的兄弟元素是块级元素还是内联元素。如果兄弟元素是块级元素，会无视这个浮动元素，即兄弟元素和浮动元素共处同行，浮动元素会覆盖兄弟元素。除非这些 div 设置了宽度，并且父元素的宽度不足以包含它们，这样兄弟元素才会被强制换行；如果兄弟元素是内联元素，则会尽可能围绕浮动元素。

lear语法：       clear : none | left | right | both取值：       none  :  默认值。允许两边都可以有浮动对象       left   :  不允许左边有浮动对象       right  :  不允许右边有浮动对象       both  :  不允许有浮动对象应该是清除clear 属性规定元素的哪一侧不允许其它之前浮动元素

都设置浮动为什么会紧贴着是因为一旦将元素设置了float属性后，会隐式的将其属性改为inline-block。

二、基础知识准备---盒子模型

清除浮动clear

    clear 属性规定元素的哪一侧不允许其他浮动元素。

left:在左侧不允许浮动元素。

right:在右侧不允许浮动元素。

both:在左右两侧均不允许浮动元素。

none:默认值。允许浮动元素出现在两侧。

inherit：规定应该从父元素继承clear属性的值。

基础知识准备--盒子模型

浮动float

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

float:inherit;

这个属性是规定应该从父元素继承float属性的值。

清除浮动

clear:left;//左侧不允许浮动元素

clear:right;//右侧不允许浮动元素

关于清除浮动clear

浮动基本知识

clear属性规定元素的哪一侧不允许其他浮动元素。

• 浮动框会浮在普通流中的框之上。文档中的普通流中的块表现得就像浮动框不存在一样。

• 浮动框脱离了文档流，不再占据文档流的位置。
  

清除浮动clear

clear:left

clear  清除浮动  left 左侧不允许
right右侧 
both两侧
none 默认值  允许两侧出现
inherit 从父元素继承clear属性的值

浮动float   left 元素向左浮动
right 向右
none 不浮动
inherit 从父元素继承float属性的值

div 为块级结构，每个DIV默认独占一行，为了使两个DIV在一行显示，可设置float属性

同一行中两个盒子的宽度不能超过总宽度之和，否则不能容纳两个盒子，会出现下面情况

浮动float

清除浮动 clear

浮动 float

浮动脱离了普通的文档流，可能造成盒子的覆盖