web页面 float定位导致“溢出现象”处理

2019独角兽企业重金招聘Python工程师标准>>>

<ul><li>菜单一</li><li>菜单二</li><li>菜单三</li><li>菜单四</li>
</ul>
<p>a,b,c,b.e,e,g,h,i</p>

>>>>如果让上面的列表成为web页面上水平排列的导航菜单，那么，需要使用CSS各种处理，其中包括IE5.5~IE10的hack处理。

在目前主流浏览器中 google使用了KHTML+WebKit为内核的浏览器，火狐使用自己的，其他非IE阵营基本都使用了WebKit内核。使用了webKit内核和火狐内核，这类浏览器的渲染能力非常优秀，兼容性很强，因此有时候你根本感觉不到自己在犯错。

1.在IE浏览器中，如果要实现上述导航菜单，必须要给ul设置【固定宽度】，而其他的浏览器不需要，为了兼容性，其他浏览器不得不遵守这一CSS规则（没办法，IE满天飞的时代啊）。

2.li是块级元素，所以默认显示在同一行，因此得为li设置[width]和[float];

3.设置完后，问题出现了(当然挖掘机问题这里不做解答)。这里的问题是整个 p标签内的内容重叠到 li下面了。这就是传说中的内容溢出现象之一。

4.解决方案，方案一(当然不是设置 p的margin-top，也建议别抱有这种想法)，给p标签设置css属性 clear:both;,这是一种方案，但这种方案只是将问题隐藏了，问题仍然存在。

5.你可以给ul设置background-color,你会发现，ul几乎没有高度，只有宽度，是不是高度问题，为ul设置高度，但想过没有，这种方式过于死板。

6.最佳方式，给 ul设置 overflow:hidden;并给p设置clear:both; 看这个单词overflow(溢出)，很显然他的职责所在。

转载于:https://my.oschina.net/ososchina/blog/337947

web页面 float定位导致“溢出现象”处理相关推荐

web页面-元素定位
web自动化测试核心内容: 元素定位网页操作等待 pytest + selenium 项目实战 1.为什么要元素定位元素定位是为了操作浏览器,如输入内容,点击按钮等,就是手工做的,自动化都可以 ...
Selenium自动化中DOM，XPATH，CSS定位Web页面对象的优劣性分析
加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...
在web页面嵌入百度地图（含定点定位）
在web页面嵌入百度地图(含定点定位) 一.操作步骤二.可能遇到的问题 1.标记图标没有正常显示出来 2.使用到项目中可能遇到的问题 (1)地图内容显示不正常 (2)标注名称的边框显示不正常三.参 ...
web前端position定位层:absolute+relative应用
web前端html定位层的特点: 完全脱离默认文档流,独立于立体层面的Z轴之上.和float浮动一样都脱离了默认文档流.但float元素与默认文档流之间会相互产生影响,而定位层元素则完全独立互不干扰. ...
应运而生的web页面响应布局
一.响应布局?貌似没听过哈技术的发展往往导致新事物的产生.关于web页面布局,我们应该听过固定布局(fixed layout).流体布局(fluid layout),那响应布局(responsive ...
web页面的性能优化以及SEO
前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如 ...
Web页面完整请求及渲染过程
前端技术人员离不开计算机网络通信知识的了解,基础的网络架构模型与TCP.HTTP等相关知识掌握之后,不免会考虑:我们在互联网使用过程中,输入一个网址后,获取网址对应的Web页面信息并成功渲染到浏览器窗 ...
Web 页面怎么加货币符号和大写转换
Web 页面数据显示常会涉及到各种各样的数据格式化处理,其中,将金额加货币符号和大写转换就很常见. 1. 代码开发版实现方法定义数据转换函数,页面进行调用. 1). 添加货币符号函数: a. 获取待 ...
移动端Web页面适配方案（整理版）
@(概述)[基本概念|百分比|rem|vw/vh|响应式设计] 移动端web页面的开发,由于手机屏幕尺寸.分辨率不同,或者需要考虑横竖屏问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需 ...

web页面 float定位导致“溢出现象”处理

web页面 float定位导致“溢出现象”处理相关推荐

最新文章

热门文章