div css图文混排列表设计中的基础问题总结

2020-05-11 08:06:06易采站长站整理

.gfixlist li .txt .title:hover{color: #F60;}
.gfixlist li .txt .more:hover{text-decoration: underline;}

2.float的几个关键问题
经常使用float,但是有几个关键点是必须要说明的。
float一开始是为了实现文本环绕的效果。它与position的绝对定位是有区别的,主要的地方在于,float的元素仍然处于“流”中,而绝对定位脱离了“流”。这样的影响就是:如果你修改了浮动元素的css,它可能会影响到周围的元素显示,而绝对定位的元素修改后不影响周围元素。
设置了float后元素就变成了块级元素。浮动的元素始终是块级元素,即使将样式修改为display:inline也不会使它的方式发生改变。
float的浮动效果并不一定永远是合适的,要理解什么时候使用float,什么时候要清除float。其实这个可以从float设计的本质来考虑,它一开始是为了让周围的元素环绕自己。所以当你不想让后面的元素再环绕包围float元素的时候就要考虑清除float了(解释了为什么要清除浮动)。
有些时候,我们清除float只是为了避免“潜在”的对其他元素的影响(所以有时候你会发现:有的代码中去掉清除浮动的代码,页面显示效果也是一样的),但是清除浮动绝对是一种很好的习惯。
3.清除浮动的方式
浮动元素后添加清除元素:
这种方法是在外围div底部添加一个元素,然后给它定义clear:both的样式。它需要添加额外的html代码,使用起来不是很方便。
让外围元素也浮动:
这种方法是让外围的元素也浮动起来,让它包含所有的浮动元素,但是它需要在后面的元素中添加clear的样式,还是要添加额外代码。
使用overflow:hidden:
你可以在外围元素上添加上这样的样式,它会强制让外围的元素包含里面的浮动元素。如果你遇到过ul的背景延伸不到里面所有float的li元素的情况,那么你应该对这种使用方法很熟悉了。但是这种方式也有问题,就是如果li有个下拉菜单什么的绝对定位的元素时,它很可能就显示不出来了,悲剧。。。
“简单清除法”:
代码中的.gclearfix类就是使用这样的方法,具体代码网上已经介绍很清楚了,如果你还不了解可以去查找更具体的“简单清除法”的介绍。
虽然它也增加了额外的html,但是非常可靠,可以保证兼容性的清除浮动。所以我推荐你也使用这样的方法。
4.IE6下的“双边距”问题
“双边距”问题产生的条件:IE6下,给浮动元素在浮动方向上设置了margin值,并且浮动元素的边距碰到了外围块的边沿。
以上三个条件缺一不可,前两个比较好理解,后一个需要注意下,如果浮动元素的前面也有一个相同方向的浮动元素,那么后面的浮动元素是不会触发“双边距”问题的。