> 웹 프론트엔드 > HTML 튜토리얼 > Css+Div布局学习(二)?清理Clear_html/css_WEB-ITnose

Css+Div布局学习(二)?清理Clear_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:33:02
원래의
1060명이 탐색했습니다.

我们在Css+Div布局学习(一)?Div布局基础这篇文章里面讲解了基本的布局方法,Footer内有clear:both;属性就一句带过了,事后想了一下对于清理还是有些话要讲清楚的。那我就开辟一篇专门讲一下。

还是使用上一篇的布局事例来说明问题更加的简单:

Masthead

Sidebar_a

Sidebar_b

Content

Footer

这个布局的Css复习一下:

#Masthead  {  background-color:#CCCCCC;  margin-bottom:10px;  }  #Sidebar_a  {  float:left;  width:25%;  margin-bottom:10px;  background-color:#3399CC;  }  #Sidebar_b  {  float:right;  width:25%;  margin-bottom:10px;  background-color:#33ff33;  }  #Content  {  margin-bottom:10px;  height:150px;  background-color:#ff3366;  }  #Footer  {  clear:both;  background-color:#ffff00;  } 

如果我们去掉#Footer 里面的clear:both; 属性,好像也没有太大的区别。那我们再来看看改变一下布局内Div的高度后会怎么样呢?

Masthead

Sidebar_a

Sidebar_b

Content

Footer:去掉了CLEAR: both;属性哦!

这个布局不好看啊,因为foot这个块跟在Content块的流后面,因此两边的浮动块也会被它包围。(我现在的话也应该是“围绕”在Sidebar_b左面的,因为没有被清理!)

Clear属性有4个值:left、right、both和none;none这个值没有什么好说的,我们一开始清理了Footer的两边,那清理一边会有怎么样的效果呢?

Masthead

Sidebar_a

Sidebar_b

Content

Footer:使用CLEAR:left;属性哦!

有了这几张的效果图,应该很好理解这个属性了。在有两个边栏的情况下,Footer使用Clear:both;是比较稳妥的。

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿