[Java web编程]第2章 HTML与css网页开发基础（浮动）

一、理解标准文档流
是指 元素根据块元素或行内元素的特性按从上到下、从左到右的方式自然排列，这也是元素默认的排列方式。

标准文档流组成

块级元素（block）

…

、

、

、列表

内联元素（inline）

、、、…

二、display属性
block：块元素，前后换行符

inline：内联元素，前后没有换行符

inline-block：行内块元素

none：无，设置元素不会被显示

三、浮动

1. float 浮动

要使块元素排列在一行还要支持宽高的方法除了使用display：inline-block外还有一种方法，就是浮动

float属性：left、right、none

2.clear 清除浮动
属性: left right both none;

3.解决父级边框塌陷的方法
一，浮动元素后面加空div：

利用clear属性能够实现外层元素从视觉效果上包围里面浮动元素的效果，其方法是在所有浮动的

后面再增加一个

。

… …

.clear{

clear:both;

margin:0;

padding:0;

}

二，设置父元素高度
三，父级添加overflow属性
overflow:hidden;

visible：默认值。内容不会被修剪，会呈现在盒子之外

hidden：内容会被修剪，并且其余内容是不可见的

scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容

auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

四，父级添加伪类after

...

.clear:after{

content: '';          /*在clear类后面添加内容为空*/

display: block;      /*把添加的内容转化为块元素*/

clear: both;         /*清除这个元素两边的浮动*/

}

总结：

清除浮动，防止父级边框塌陷的四种方法

Ⅰ、浮动元素后面加空div

简单，空div会造成HTML代码冗余

Ⅱ、设置父元素的高度

简单，元素固定高会降低扩展性

Ⅲ、父级添加overflow属性

简单，下拉列表框的场景不能用

Ⅳ、父级添加伪类after

写法比上面稍微复杂一点，但是没有副作用，推荐使用

inline-block和float的区别

a.不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果

b.相同之处：能在某程度上达到一样的效果

C.inline-block存在的小问题:中间存在间隙，对父元素添加，{font-size:0}