首页 > 代码库 > 辛星跟您彻底解决CSS中的浮动(下)
辛星跟您彻底解决CSS中的浮动(下)
上面一篇博文,我们讲解了如何使用CSS中的浮动,这一篇我们来讲解一下如何清除CSS中的浮动,其实CSS中的浮动的清楚很简单,只需要使用clear属性就可以了,至于怎么用好它,很多人可能一投雾水,我在初学的时候也是经常找不着北,就好像清除浮动是个随机事件一样,当然,它不是,它的规律性很强,就让辛星来给您剖析一下这个规律把。
首先还是上面的HTML文件,它的内容如下:
<html> <head> <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"my.css">>然后是下面的CSS文件,我们还是摘抄一下:
#demo1{ background-color: #933; height: 100px;width:300px; } #demo2{ background-color: #0F0; height:60px;width:200px; } #demo3{ background-color: #F00; height: 140px;width: 250px; } #demo4{ background-color: #CCC; height: 80px;width: 180px; }其实要用clear清除浮动,紧紧抓住定义就可以了:clear的取值可以有四个,分别是none,left,right和both。大家一定要注意一点,那就是它是清除浮动,它清除的谁的浮动,它清除的是前一个的浮动,比如clear:none,这个和没写一样,clear:left表示如果前一个是浮动元素,那么它不能在该元素的左边浮动,即如果我的clear属性是left,我绝对不允许有一个在我左边浮动的元素,取值为right即我不允许我的前一个在我右边浮动,取值为both,即我不允许我的前一个元素在我任何一边浮动。我们可以让区块2右浮动,让区块3清除浮动,但是它本身不浮动,区块4也不浮动,那么代码如下:
#demo1{ background-color: #933; height: 100px;width:300px; } #demo2{ float: right; background-color: #0F0; height:60px;width:200px; } #demo3{ clear: both; background-color: #F00; height: 140px;width: 250px; } #demo4{ background-color: #CCC; height: 80px;width: 180px; }效果图如下:
那可能有人会问了:星哥,如果区块三使用clear:left,是不是就会紧挨着区块1了,答案是这样的,我们修改CSS代码如下:
#demo1{ background-color: #933; height: 100px;width:300px; } #demo2{ float: right; background-color: #0F0; height:60px;width:200px; } #demo3{ clear: left; background-color: #F00; height: 140px;width: 250px; } #demo4{ background-color: #CCC; height: 80px;width: 180px; }结果图如下:
上面我们的区块3并没有使用浮动,大家理解起来会非常容易,那么如果区块三使用了右浮动呢?看下面代码:
#demo1{ background-color: #933; height: 100px;width:300px; } #demo2{ float: right; background-color: #0F0; height:60px;width:200px; } #demo3{ clear: both; float: right; background-color: #F00; height: 140px;width: 250px; } #demo4{ background-color: #CCC; height: 80px;width: 180px; }下面是效果讲解:
那么此时大家可能会想,如果我的区块四清除了右浮动又该如何呢?
此时css代码变成:
#demo1{ background-color: #933; height: 100px;width:300px; } #demo2{ float: right; background-color: #0F0; height:60px;width:200px; } #demo3{ clear: both; float: right; background-color: #F00; height: 140px;width: 250px; } #demo4{ clear: both; background-color: #CCC; height: 80px;width: 180px; }此时的效果如下:
到这里,我要讲的就全部讲完了,当我还是个小菜鸟的时候,也是一头雾水,听得迷迷糊糊,但是,我看了N多人的博客,听了N多人的解释,终于明白了。当然,我敢肯定,我看的那些博客里有错误的讲解,但是本文在正确性上绝对可以放心的。。。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。