最近在切图,问题真是多。
float
假设父元素中所有的子元素都float了,那么父元素就会失去height
,那么这个时候就需要清除浮动了。
声明一下:这种方法不考虑IE那个货。。。
很简单的方法就是给父元素加上
overflow: hidden;
- 纳尼!如此就好?
yes! - 那么你怎么还不会!
咳咳,我把overflow加到了浮动元素上,所以在使用开发者工具来查看元素的时候,父元素一直没有高度…唉~
why float
为什么要使用float?
在使用float之前,我排除了table,选择div这里是一片日历——没错,全部都是div。以前没这么做过。我不是很想用float,所以就使用了display:inline-block;
但是这里出现了一个问题,那就是div之间有间隔不止 3px!什么情况?你怎么解决的?
我也不知道,一开始以为是margin,padding的问题,加了css
margin:0;padding:0;
但是没有效果,这好奇怪。
- 接着呢?
接着我去查了,是因为我的div们是这样写的
<div></div>
<div></div>
<div></div>
…
解决办法是这样写
<div></div><div></div><div></div>
更多好方法参见网上转载文章
http://www.w3cplus.com/css/inline-blocks.html
我最后选择float。
如何发现清除浮动不顶用
- 这个标题是啥意思啊?
首先这个标题所要表达的意思是overflow写错地方的场景下。
我写的那个部分需要设置margin-bottom
但是一直没能得到想要的效果。就这样发现了原来是父元素没有高度。 - 那你所用的工具呢?
chrome浏览器自带的开发者工具,足够了。