HTML第七章

第七章 浮动

1.常见的网页布局：

      

布局类型	布局样式	图示
国字型	1-3-1	图1
拐角型	1-2-1	图2

 

2.浮动：

什么是浮动：在标准文档流中， 一个块级元素在水平方向会自动伸展到包含它的元素的边界，在竖直方向和其他的块级元素依次排列，如果需要将一个块级元素排在另一个块级元素的左边或右（如图2）就需要使用浮动才能实现，要实现浮动就要在CSS中设置float属性。

float属性值
属性值	说明	例(向左浮动)
left	元素向左浮动	.layre02{ border:1px #00F dashed; float:left;  }
right	元素向右浮动
none	默认值。元素不浮动，并会显示在其文本中出现的位置

 

3.清除浮动：

    在CSS中的浮动属性在页面排版中会影响其他元素的位置，使用清除浮动可以使其他后面的标准文档流中的元素不受浮动元素的影响。

clear属性值
属性值	说明	例(清除<img>左右两侧浮动)
left	在左侧不允许浮动元素	img{ clear:both; }
right	在右侧不允许浮动元素
both	在左、右侧不允许浮动元素
none	默认值，允许浮动元素出现在两侧

 

4.扩展盒子高度：

扩展盒子高度步骤
1.在父级div的最下面一层加一个空的div	例： <divid=”father”> <div class=”layer01” <img src=”image/potp01”/> <div class=”layer02” <img src=”image/potp01”/> <div class=”kong”></div> </div>
2.清除div的左右浮动	例：    .kong{ clear:both;          margin:0px;          padding:0px; }
3.将div的margin和padding设为0px

 

5.溢出处理：

在网页的制作过程中，有时需要将内容放在一个宽度和高度固定的盒子中，超出部分隐藏起来，或者以带滚动条的窗口显示等，有时还需要外层的盒子从外观上包含它里面代码浮动的盒子，这些都 需要CSS中的overflow属性来实现。

overflow属性的常见值
属性值	说明
visible	默认值，内容不会被修剪，会呈现在盒子之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
scroll与auto的区别	overflow属性值是scroll时X方向没有溢出也在底部显示了不可用的滚动条; 而overflow属性值是auto时，仅在内容有溢出的高度部分产生了滚动条，底部的滚动条只在X方向出现溢出时才会显示。

 

6.overflow的妙用：

 

Overflow清除浮动扩展盒子高度
属性	值	例：   #father{       Border:1px #000 solid       Width:500px; overflow:hidden; }
overflow	hidden
备注	如果页面中有绝对定位元素，并且绝对定位超出了父级的范围，这里使用overflow就不合适了，而需要使用clear属性清除浮动。