HTML中的浮动

---

一、网页布局分类

网页基本上都包括网站导航，网页主题内容，网站版权三个部分，虽然互联网上的网页基本上都包括这三个部分，但是在布局上各不相同。网页布局有上左右下布局，上左中右下布局，左边固定，右边自适应布局等，网页的头部和底部差不多，差异在于主题内容。

1.什么是标准文档流？
标准文档流是指元素根据块级元素或行内元素的特性按从上到下，从左到右的方式自然排列。

二、display属性的使用

已经知标准文档流右两种元素，一种是以div代表的块级元素，另一种是以span为代表的内联元素，控制元素是块状显示还是行内显示的属性就是display属性。

1.display属性值的使用：
网页中常见的display属性值右4个:
display: block;（块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符）
display:inline;（行内元素的默认值，元素会被显示为行内元素，该元素前后没有换行符）
display:inline-block’（行内块级元素，元素既有行内元素的属性，也具有块级元素的属性）
display：none;（设置元素不显示）

2.当行内元素使用display:block;属性时行内元素会转变成块级元素，支持设置宽和高，也会独占一行显示；

3.当div等块元素使用display:iline;后会把它转化为行内元素，由内容撑开宽高，可以排在一行显示

4.使用display:inline-block;属性后div元素和span元素可以排在一行，并且都支持设置宽高。

5.使用dislay:none;属性后在浏览器中该元素会被隐藏不显示，但是在调试窗口还可以看到该元素。

三.浮动的应用

在网页中要实现浮动效果，需要在CSS中设置float属性，默认值为none，也就是标准文档流块级元素通常显示的情况。如果将float的属性值设置为left和right，元素就会向其父级元素的左侧和右侧浮动，

1.float属性：
在CSS中，通过float属性定义网页向哪个方向浮动，一般这个属性应用在图像，使文本围绕在图像周围。常用的属性值是左浮动和右浮动。
但是某些元素设置了浮动，在页面排版是就会影响其他元素的位置。如果子元素全部浮动了，父级元素就包不住子元素会造成边框塌陷。

2.clear属性：

若要使标准流文档中的元素不受其他浮动的元素影响，就需要使用clear属性。

clear属性用于规定元素的哪一侧不允许出现其他浮动元素，常用的值有：
clear:left;（在左侧不允许浮动元素）
clear right;（在右侧不允许浮动元素）
clear:both;（在左右两侧都不允许浮动元素）
clear:none（默认值，允许浮动元素出现在两侧）

四、解决父级边框塌陷的方法

1.浮动元素后面加空div
使用clear属性能够实现外层元素从视觉上包围里面的浮动元素，方法是在所有浮动的元素后面再加一个空的div

2.设置父级元素的高度
父元素的边框塌陷后就会包不住里面的浮动元素，把父级元素设置高度把边框撑开，就可以在视觉上看到父级元素包裹住子元素

3.父级元素添加overflow属性
在CSS中使用overflow属性也可以清除浮动来扩展盒子的高度，仅需要设置父级元素的overflow属性为hidden即可。

overflow属性用来定义溢出元素内容该如何处理，常用的属性值如下;
overflow:visible（默认值，内容不会被修剪，会呈现在盒子之外）
overflow:hidden;（内容会被修剪，并且其余内容都是不可见的）
overflow:scroll;（内容会被修剪，并且浏览器会显示滚动条以便查看其余内容）
overflow:auto;（如果内容被修剪，浏览器就会显示滚动条以便查看剩余内容）

4.父级添加伪类after
伪类after的意思是选择class类后面的元素，并添加样式
代码样式如下

.clear:after{
       cotent:";                          /*在clear类后面添加内容为空*/
       display:block;                 /*把添加的内容转化为块级元素*/
       clear:both;                      /*清除这个元素两边的浮动*/
       }

5.inline-block和浮动的区别：
优点：
display:inline-block可以让元素排列在一行并支持设置宽高，代码实现起来方便，添加该属性的元素在标准文档流中，不需要清除浮动
浮动可以让元素排在一行并且支持宽高，还可以决定排列方向

缺点：
display:inline-block；的位置方向不可控制，会解析空格
浮动后元素脱离文档流，会对周围元素产生影响，所以必须要在父级元素上添加清除浮动的样式。