基于Web标准的网页设计.pptVIP

4.6.2清除浮动的影响 如果对Box-3同时设置清除浮动和浮动，即： .son3{clear:both; float:left;} 上下margin叠加只会发生在标准流中，浮动盒子的上下margin不会叠加 Box-3浮动且清除浮动 Box-3清除浮动 5.1.3 清除浮动影响的用途 1. 扩展外围盒子高度 本质：清除子元素浮动对父元素的影响。 清除浮动前 清除浮动后 5.1.3 清除浮动影响的方法 如果一个父元素内所有的子元素都浮动，一定要记得对这个父元素作清除浮动处理。否则该父元素下面的元素会顶到浮动元素的位置上去 方法： 在所有子元素最后添加一个清除浮动的元素。 在父元素内部的末尾添加一个伪元素 .father:after { content: ; display: table; clear: both; } 补充：伪元素选择器 :before和:after 在元素内部的左右两侧产生两个伪元素 内容 :before :after 内容 :before :after 伪元素默认是行内元素 设置伪元素为块级元素 p:before,p:after{content: --; color:red; display:block;} 补充：伪元素选择器 :first-letter和:first-line 将内容文本的第一个字符或第一行转变为一个伪元素 5.1.3 清除浮动影响的方法 如果一个元素前面的兄弟元素浮动，则可以对紧邻该浮动元素的后一个元素作清除浮动处理。 或者增加一个元素专用于清除浮动 div class=son1Box-1/divdiv class=son2Box-2/div br class=cls style=clear:both 浮动的应用：1－3－1布局 body header container nav content side pagefooter 4.6.4 浮动的应用举例 1 图文混排及首字下沉效果等 微博对话框 栏目框 2 菜单的竖横转换 3 制作栏目框标题栏 标题栏的左端是栏目标题，右端是“更多”之类的链接。如何将文字分别放在一个盒子的左右两端呢？ 最简单的办法就是设置左边的文字左浮动，右边的文字右浮动。这时由于两个盒子都浮动，不占据外围容器的空间，所以必须设置外围盒子h3的高度，使它在视觉上能包含住两个浮动的盒子 || 栏目标题1 more 3. 制作栏目框标题栏 有3种方法，最简单的方法如下： h3 id=coltitle span class=“more”more/span 栏目标题1 /h3 #coltitle span.more{ float:right; padding-right:12px; } 3. 网页固定宽度1-3-1布局 在默认情况下，div作为块级元素是占满整行从上到下依次排列的，但在网页的分栏布局中，例如1-3-1固定宽度布局，我们希望中间三栏（三个div盒子）从左到右并列排列，这时就需要将这三个div盒子都设置为浮动。 但三个div盒子都浮动后，只能浮动到窗口的左边或右边，无法在浏览器中居中，因此需要在三个div盒子外面再套一个盒子（称为container），让container居中，这样就实现了里面的三个div盒子居中 Firefox中的1－3－1布局示意图 body header container nav content side pagefooter 1－3－1布局的结构代码 div id=“header”h1头部标题/h1/div div id=container div id=naviid=navi/div div id=contentid=content/div div id=sideid=side/div /div div id=pagefooterid=pagefooter/div 1－3－1布局的CSS代码 #header,#pagefooter,#container{ margin:0 auto; width:772px; border: 1px dashed #FF0000; } #navi,#content,#side{ border:2px solid #0066FF; } #navi{ float:left; width:200px; } #content{ float:left; width:360px; } #side{ float:left; width:200px; } #pagefooter{ clear:both;} 解决IE 6最