1.元素在文档流中的排列方式
block元素：
独占一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性。
inline元素：不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会 新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效。 inline元素的margin和padding属性。水平方向的padding-left, padding-right, margin- left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
常见的块级元素：div、form、table、p、pre、h1～h5、dl、ol、ul 等。
常见的内联元素：span、a、strong、em、label、input、select、textarea、img、br等。
2.基本概念
文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
只有绝对定位absolute和浮动float才会脱离文档流。
3.1 float部分无视
（1）定义：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
（2）浮动元素后跟block元素&浮动元素后跟inline元素对布局的影响？
<body>
<div style="background-color:pink;width:100px;height:100px;" >box1</div>
<div style="background-color:green;width:100px;height:100px;float:left;">box2 向左浮动</div>
<div style="background-color:red;width:200px;height:200px;">box3</div>
/* <span style="background-color:red;width:200px;height:200px;">box3</span>*/
</body>
后跟block元素：浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。(例1)
后跟inline元素：浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列(例2)
（3）元素浮动造成的两个div覆盖或相互重叠如何解决？
（3.1）左右结构div盒子重叠现象：一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。如上面的例1：相邻的两个盒子box2向左浮动、box3未浮动。一个使用浮动一个没有导致DIV不是在同个“平面”上，但内容不会照成覆盖现象，只有DIV形成覆盖现象。
————解决方法：要么都不使用浮动；要么都使用float浮动；要么对没有使用float浮动的DIV设置margin样式。如上面的例1中box2宽度是100，只需要对box3设置margin-left：102px就可以实现不重叠。
（3.2）上下结构div盒子重叠现象
<body>
<div id="container" style="border:1px solid red;width:300px;">
<div style="background-color:green;float:left;width:100px;height:100px;">box1 向左浮动 </div>
<div style="background-color:green;float:left;width:100px;height:100px;">box2 向右浮动 </div>
</div>
<div style="background-color:pink;height:40px;">box3</div>
</body>
.container和box3的布局是上下结构，上图发现box3跑到了上面，与.container产生了重叠，但文本内容没有发生覆盖，只有div发生覆盖现象。这个原因是因为第一个大盒子里的子元素使用了浮动，脱离了文档流，导致.container没有被撑开。box3认为.container没有高度（未被撑开），因此跑上去了。
————解决方法：1.文字内容多少已确定的情况下，给.container设置一个高度
2.文字内容不确定，可以用清除浮动，具体有两种方法，如下：
2-1 使用css clear清除浮动
clear属性规定元素的哪一侧不允许出现浮动元素
clear语法：clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
注意：
clear属性只会对自身起作用，而不会影响其他元素。如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即clear：right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。
【例子】
例3：box1向右侧浮动，box2不设置clear属性
例4：box1向右侧浮动，box2设置clear：right，表示右侧不允许出现浮动元素，则box2自动下移一行
例5：box1向左浮动，box2和box1出现重叠
例6：在box2中设置clear：left；表示左侧不允许出现浮动元素，box2同样会下移
*最佳：一般都会增加一个空div块，并使用clear：both来设定表示两侧都不允许有浮动元素。这样新的空div块会下移，达到撑开父元素的目的
<body>
<div id="container" style="border:1px solid red;width:300px;">
<div style="background-color:green;float:left;width:100px;height:100px;">b1</div>
<div style="background-color:green;float:left;width:100px;height:100px;">b2</div>
<div style="clear:both"></div>
</div>
<div style="background-color:pink;height:40px;">b3</div>
</body>
2-2 给父元素设置overflow：hidden来清除浮动
overflow：hidden的含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之上的。那从侧面看，它浮动的部分已经是溢出了，所以清除了它的浮动属性后，它重新回到普通流之内，可以清除平面间的溢出部分。
网友评论