html--清除浮动的方法

Hack1. 给父元素设置--overflow:hidden;

  优点:代码少,简单,浏览器支持好

  缺点:不能够与position配合使用,因为超出部分会被隐藏

Hack2. 给父元素设置--固定height

  优点:简单,代码少,容易掌握

  缺点:只适合高度固定的布局,要给出精确的高度,当高度与父级高度不同时会产生问题

Hack3. 给浮动元素下方添加空的div 给div添加clear:both

  优点:代码少,容易掌握

  缺点:如果浮动元素过多,容易造成代码冗余

Hack4. 万能清除法,可放在reset/base.css中,用的时候直接使用类名--.clearFix{content:".";height:0;display:block;overflow:hidden;visibility:hidden;clear:both}

  优点:支持性好各大网站都在用万能清除浮动法

  缺点:代码多,复杂,不适合初学者掌握理解原理

猜你喜欢

转载自www.cnblogs.com/zongzizi/p/11980642.html
今日推荐