使用li嵌套实现的二级导航菜单，在IE浏览器下显示正常，而在谷歌及360极速模式下最后的几个li标签下沉了，其实在webkit内核的浏览器中都会有这种情况，如下图：

出现此种状况，有两种可能：

1、导航条的宽度不够，使得最后的几个li标签容纳不下，因此错行下沉，此时只需调整导航条和li标签的宽度；

2、横排的导航条是通过li标签设置浮动实现的，即li标签的float属性，当设置li浮动而其所在的ul标签未设置浮动时也会出现此种状况，此时只需为li所在的ul设置float属性即可；为固定导航条的位置，可通过div标签先将位置固定，再使用ul li标签设置浮动实现；

经测试，我的网站属于第二种情况，所以设置浮动时，尽量一个div中的子元素都设置浮动，不要设一部分。

不行就是margin-top越界使用伪元素清除浮动

.header:after,.sec_head:after,.sec_img:after,section:after,
.header:before,.sec_head:before,.sec_img:before,section:before{content:"";display:table;clear:both;}

这里的元素是当前元素和受影响的元素

或者设置margin-top为负值；

li下沉 margin-top越界 浮动带来的影响的更多相关文章

  1. float---浮动带来的影响与清除浮动带来的影响方法----在路上（20）

    使用float会带来哪些影响: 脱标:无行级块级之分: 相互贴靠:若想之间有空隙可用margin与padding: 顶边对齐: 文字环绕: 当使用float后,子标签脱离父标签,父标签就会失去高度,此 ...

  2. 为什么设置overflow为hidden可以清除浮动带来的影响

    1.问题起源 在平时的业务开发写CSS中,为了满足页面布局,元素的浮动特性我们用的不能再多了.使用浮动的确能够解决一些布局问题,但是也带了一些副作用影响,比如,父元素高度塌陷,我们有好几种可以清除浮动 ...

  3. 浅谈css中浮动和清除浮动带来的影响

    有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...

  4. 详解为什么设置overflow为hidden可以清除浮动带来的影响

    1.问题起源 在平时的业务开发写CSS中,为了满足页面布局,元素的浮动特性我们用的不能再多了.使用浮动的确能够解决一些布局问题,但是也带了一些副作用影响,比如,父元素高度塌陷,我们有好几种可以清除浮动 ...

  5. 《----css样式---------浮动带来的影响与解决方法---------------》

    浮动就是让我们的元素脱离标准文档流,目的是为了布局好看! 浮动的现象: 脱离标准文档流被叫做脱流,同时会出现字围现象. 浮动的元素会相互贴靠,而且如果父容器空间足够大,则浮动的元素会正常紧靠也就是后一 ...

  6. li里的a标签浮动了，为什么li本身也浮动了？

    <ul> <li><a href="#"></a></li> <li><a href="#& ...

  7. 如何清除浮动(float)所带来的影响

    清除浮动(float) 1.定义和用法 在w3c中给了浮动这样的定义. "float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素 ...

  8. 解决float浮动带来的父元素高度没有的问题---清除浮动

    float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...

  9. [css]浮动造成的影响

    浮动造成的影响: 子元素浮动,父元素无法被撑出高了. 如果要给父元素做通栏background? 如果两个box的子元素都浮动,且希望两个box分行显示? box1 box2 box3: float: ...

随机推荐

  1. oracle 定时备份

    第一步.bat脚本: @echo off echo 删除10天前的备分文件和日志 forfiles /p "z:/back" /m *.dmp /d -10 /c "cm ...

  2. CSS修改方法

    1.在IE中,大部分情况下默认margin = 0px padding = 0px,但在Chrome中需要写明 在css.css文件开头加上(要加在最上面) html,body,ul,ol,li,ta ...

  3. ACM题目————士兵杀敌（三）

    [RMQ算法]:用于当数组过于庞大的时候,查询区间的最大(最小)值. 时间复杂度:O(nlogn),主要时间发费在预处理上,查询只要O(1). 描述 南将军统率着N个士兵,士兵分别编号为1~N,南将军 ...

  4. 记一次SortedDictionary的不当使用

    起初想用SortedDictionary做游戏中的排行榜,代码如下: using UnityEngine; using System; using System.Collections; using ...

  5. shell基础知识

    Shell 学习基础 1.组合命令的符号 管道,将前面一个命令的结果作为后面一个命令的输入 分号,顺序执行用分号分割的命令 重定向,重定向包括三种:输入重定向.输出重定向.错误重定向,以7个不同的符号 ...

  6. PHP处理数据--excel与scv与json

    今天要处理两个excel.两个循环嵌套验证重复性.所以写了几个函数来处理20亿次的数据量. 一.把excel读出来,保存为json.利用phpexcel插件: <?php header(&quo ...

  7. ADO.NET增删改-------跟查不一样

    建立数据库 create database ren go use database go create table user ( code nvarchar(20) primary key,--编号 ...

  8. EF 存储过程

    今天我们利用EF执行sql语句的方式来执行存储过程,并得到OutPut的值. 首先新建存储过程: Create PROCEDURE proc_testEF   (     @id int,     @ ...

  9. 6-JS函数（二）

    函数 函数的实参和形参 function temp (a,b){ console.log(a) }; // a , b为两个形参 var a1 = 2; var b1 = 3; temp(a1,b1) ...

  10. .Net(C#)Parallel"循环"的解释以及与循环的比较

    Parallel 类提供对并行循环和区域的支持. 许多个人计算机和工作站都有两个或四个内核(即 CPU),使多个线程能够同时执行. 在不久的将来,计算机预期会有更多的内核. 为了利用当今和未来的硬件, ...