H5 CSS3 float浮动小结

这篇文章是使我平时写网页时的经验以及在网上看到的一篇文章所总结的。那个大佬的总结在最后有链接,大家可以好好看看。

什么是浮动
首先要了解什么是浮动:脱离文档流,默认在当前的行对既定的方向进行移动(默认横排)。

用浮动可以解决什么问题
使用浮动之前我们要想明白浮动都可以解决什么问题:比如我们要放一排的div或是img,我们故可以通过调试margin之类的属性解决,但是有时会发现即便如此有时仍会产生空隙,我们就可以通过浮动来解决这一问题。再比如有时后我们需要一些标签不会占据文档流的显示,这时候也可以选择使用。

浮动会出现什么问题
但是浮动往往会产生一些问题:如:浮动自定义换行,浮动坍塌,浮动遮盖。

  1. 自定义换行:比如浮动往往是在遇到其他浮动块或是到既定边缘才会进行换行
  2. 浮动坍塌:因为浮动脱离文档流所以可以看起不再占据位置,这样就会导致父元素的长宽减小。导致子元素超出父元素
  3. 浮动遮盖:也是因为脱离文档流的原因,与浮动块同级的块级元素会重叠。

怎么清除浮动
因此我们要学会清除浮动,清除浮动就是为了解决上面的问题,有的解决方法是通过给float以外的块设定好属性,有的是清除浮动了,虽然两者效果可能相同,但前者的维护性和书写性实在是不很不友好,所以我主要写后者。
5. 给浮动块结尾一个空div并设置上clear:both属性。
其原理是float元素是不会在普通流中计算高度,拥有clear属性的div是在普通流中的,通过 “自动” 增加 上外边距(margin-top) 实现撑开父元素
6. 给浮动块的元素加上一个after的伪类 并且设置为block 和 clear:both.其原理和上面的一样
7. 给浮动块的父元素一个overflow:hidden的属性。

写到这里放一个大佬写的比较全的清除浮动的方法:http://www.imooc.com/article/40886?block_id=tuijian_wz

发布了31 篇原创文章 · 获赞 25 · 访问量 6514

猜你喜欢

转载自blog.csdn.net/qq_43719932/article/details/90576729