做网站建设公司赚钱吗,秦皇岛市建设局官网,网站开发与维护是干什么的,营销网站建设公司今天看到一篇文章关于清除浮动的#xff0c;突然间脑袋短路了#xff0c;咦#xff1f;为什么要清除浮动#xff1f;原谅我的无知#xff0c;搜了下原来是这样#xff0c;又倒腾出原来的笔记#xff0c;唉#xff0c;本来就有记录啊#xff0c;而且也会经常用到#…今天看到一篇文章关于清除浮动的突然间脑袋短路了咦为什么要清除浮动原谅我的无知搜了下原来是这样又倒腾出原来的笔记唉本来就有记录啊而且也会经常用到用的久了连原理都忘了。恩防止自己再犯同样的错误我还是自己总结整理出来吧话不多说代码为证1 DOCTYPE html2 3 4 5 为什么要清除浮动title6 7 .wrapper{width:50%;background:cornflowerblue;border:2px solid black;}8 .box1{width:30%;height:100px;background:red;}9 .box2{width:30%;height:100px;background:black;}10 .box3{width:30%;height:100px;background:chocolate;}11 style12 head13 14 15 div16 div17 div18 div19 body20 html恩各个浏览器运行的效果图如下其中A-B-C分别是I元素里的子元素如果没有浮动的情况它们是按照标准文档流布局(块级元素从上至下行内元素从左至右)一个网页需要合理的布局才能够吸引住用户我们需要在有限的空间内展示更多的信息有时候需要a,b,c,排在一行咱不用高大上的Flexbox(弹性盒布局)因为IE8及以下都不支持你要问我怎么知道的给大伙儿甩个网址http://caniuse.com/#home自行搜索哦另外IE不支持VW和VH单位用的小朋友谨慎通常情况我们是不需要给父元素定宽高的而且想让它宽高自适应但是如果我们给子元素添加了floatleft;之后会是什么情况呢咱们用图说话父元素哪里去了恩这里咱要说明下浮动是什么原理了打个比方吧原谅我的想象力不丰富我们把父元素想象为一个可以自动收缩的盒子当我们不停地往里面放子盒子的时候它就会自动被撑开给子元素加float(英文原义指飘动浮动的意思)的时候就相当于子元素飘在了父盒子之上那么显然父盒子空了就自动收缩回去了现在我们要做的是如何不让它收缩回去1.给父元素加overflowhidden恩要说这个方法的优劣我刚才查了下可能会对SEO不友好但具体有多大的严重影响我还没有这方面的经验姑且就这样解释吧待我遇到了再回过来修改。.wrapper{width:50%;background: cornflowerblue;border:2px solid black;overflow:hidden;}2.给子元素的下方添加空的div1 2 3 div4 div5 div6 div7 div8 bodybox4就是我们添加的空元素这个空元素的具体写法如下(有兼容~有兼容~有兼容~万恶的IE6不支持因为人家有默认的最小高度)1 .box4{clear:both;height: 0;overflow: hidden;}3.采用伪类选择器的方式来达到清除浮动的目的我工作中采用的就是这种方式屡试不爽哦(不好意思刚才自己给自己挖了一个坑目前还在坑里我再试试...).wrapper:after{clear:both;content:.;display:block;height: 0;overflow: hidden;visibility: hidden;}恩好了就是上面的那样content: .; display:block;对于五大浏览器来说不可缺少visibility:hidden;的作用是允许浏览器解析它但是用户看不到哦。原创文章转载请注明出处 蜗蜗牛在路上[http://www.cnblogs.com/wowoniuzailushang]同步发表于: http://blog.csdn.net/wowoniuzailushang CSDN
