使用HTML语言和CSS开发商业站点_浮动

第7章   浮动
一.网页布局
1.常见的网页布局
网站基本包括网站导航（包括网站logo，导航菜单，及其他信息），网页主体内容（是网页上要呈现给浏览 者的内容），网站版权部分（包括网站声明，相关链接）三个部分。
2.标准文档流
是指元素根据块元素或行内元素的特性按从左到右，从上到下的方式自然排列。
二.display属性
标准文档流有两种元素，一种是以<div>为代表的块级元素，还有一种是以<span>为代表的内联元素。
display属性的使用:
display属性的常用值
block 块级元素的默认值
inline 行内元素的默认值
inline-block 行内块元素
none 设置元素不会被显示
三.浮动概述
float属性:
left:元素向左移动
right：元素向右移动
none：默认值。元素不浮动，并会显示在其文本出现的位置。


四.清除浮动
1.clear属性
left：在左侧不允许浮动元素
right：在右侧不允许浮动元素
both：在左，右两侧不允许浮动元素
none：默认值，允许浮动元素出现在两侧
2.解决父级边框塌陷的方法
(1)浮动元素后面加空div（很简单，空div会造成HTML代码冗余）
(2)设置父元素的高度（很简单，元素固定高会降低元素可扩展）
#father{
  height:300px;
}
(3)父级添加overflow属性（很简单，但是有下拉列表框的场景不能用）
#father{
  overflow:hidden;
}
overflow属性的常见值
visible:默认值，内容不会被修剪，会呈现在盒子之外
hidden：内容会被修剪，并且其余内容是不可见的
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余内容
(4)父级添加伪类after（写法比上面稍微复杂一些，但是没有副作用，推荐使用）
伪类after的意思是选择到class类的后面元素。clear：after的意思是选择类名是clear后面
的元素并添加样式。
  对应的CSS关键代码如下：
.clear:after{
content:"";/*在clear类后面添加内容为空*/
display:block;
clear:both;
}

五.inline-block和浮动的区别
优点：display：inline-block可以让元素排在一行，并且支持高度和宽度，代码实现起来方便，添加该属性的元 素   在标准文档流中，不需要清除浮动。
           float可以让元素排在一行并且支持宽度和高度，可以决定排列方向。
缺点：display：inline-block位置方向不可控制，会解析空格。