前端开发遇到什么问题?CSS清除浮动

前端开发看的书籍|什么专业适合前端开发?|前端移动开发能做什么的?

[p]#####清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近。

 #####css清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受。[/p]

      1、[color=Black]**结尾处加空div标签 clear:both**[/color]               

[code].div1{background:#000080;border:1px solid red;}

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:30%;height:80px;background:#DDD}

.clear{clear:both}
[/code]

这种方法,感觉之前大家用的比较多。但是无缘无故多出一个空的div,而且浮动越多就要不断加div,让我感觉很忧伤,所以我不太喜欢用。
          2、[color=Black]**父级div 也一起浮动**[/color]              

[code].div1{background:#000080;border:1px solid red;width:98%;margin-bottom:10px;float:left;}

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:30%;height:80px;background:#DDD}
[/code]
这个方法我记得我是在学校的时候,看老外的css书时看到的,当时觉得很好用,但是现在觉得最好还是别用了,有时真的会很麻烦。
因为父级的元素一浮动,又会产生其他元素的浮动问题,不信你可以试试。

      3、[color=Black]**父级div定义 height**[/color]
         #####这个方法其实我还是蛮常用的,主要用在那些可以确定高度的元素上,感觉使用上很方便。但是那些需要自适应高度的就不适合了。

[code].div1{background:#000080;border:1px solid red;height:200px;}

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:30%;height:80px;background:#DDD}
[/code] 4、[color=Black]父级div定义 伪类:after 和 zoom[/color]

          #####这个方法也是我平时比较喜欢用的,感觉还挺好用的。
          #####可以定义一个通用类选择器,然后反复使用:
          [color=DarkRed].clear{zoom:1}[/color]
          [color=DarkRed].clear:after{display:block;clear:both;content:"";}[/color]

          刚用这个的时候,还不知道content属性是干嘛的,后来查了下是这么解释的:
        content配合before和:after伪类一起使用,用于插入内容。
        小小举个例子,简单写一下:

          [color=DarkRed]a:after{content:"aaa";}[/color]

         [color=DarkGreen] <p><a href="#" target="_blank" target="_blank" target="_blank" target="_blank">AAA</a></p>[/color]

         #####最后的显示结果是AAAaaa

[code].div1{background:#000080;border:1px solid red;}

.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}

.clear{zoom:1}
.clear:after{display:block;clear:both;content:””;}
[/code] #####清除浮动还有很多种方法,不过我不太喜欢啦。找了篇比较详细的文章传送门 。

网易前端开发工资|中建二局 前端开发岗位职责|gs前端开发岗位职责

» 本文来自:前端开发者 » 《前端开发遇到什么问题?CSS清除浮动》
» 本文链接地址:https://www.rokub.com/4057.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!