欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css清除浮动(css 解决浮动元素引起的高度问题)

程序员文章站 2024-02-09 18:06:24
...

首先了解两个概念

  1. 文档流:文档流是文档中可显示对象在排列时所占用的位置。
  2. 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。

浮动的实际用途,可设置文字环绕或使元素宽度由内容填充(类似Inline-block)。使用浮动需要注意的是如果浮动的元素高度比父级容器还高,那么需要设置父级容器的overflow属性为auto,使其自动撑满。

 

本人经常使用的清除浮动是使用以下这种(目前主流,可以把该样式封装在全局,供一整个项目复用)
 

选择符:after{ 
content:""; 
clear:both; 
display:block;
}

也有写法把content设置为不为空,此时要设置  visibility:hidden;/*将元素隐藏*/

以上方法,未考虑ie6-7这老掉渣的版本(IE6,7下不兼容 after伪类),兼容方法添加如下样式


选择符{zoom:1;}

zoom:1; //     触发 IE下 haslayout,使元素根据自身内容计算宽高

 

其他一些方法罗列(不齐全)


1、给父容器一个确定的高度
2、手动添加一个空div,并设置样式{clear:both;}的

3、父元素增加样式overflow:auto;