在网页布局中有时会遇到这种情况：

如果左边用<dt>，右边用<dd>，放在一行显示，<dt>要设置float:left，这个应该都知道，问题是，第一行这样做没有问题，可是第二行就有问题了，代码如下：

css:

;;}
body #menu{margin-left: 8px;margin-top: 8px;border: 1px solid grey;width: 490px;}
body div dl{margin:7px 0;}
body div dl a{text-decoration: none;font-size: 10px;color: #737373;}
body div dl dt a{color:#e4393c;font-weight: bold;}
body div dl dt{width:60px;float:left;text-align: right;padding-right: 6px;}
body div dl dd a {height: 22px;line-height: 22px;}

body:

<body>
<div id="menu">
<dl>
    <dt><a href="#">经管励志</a></dt>
    <dd>
        <a href="#">经济</a> <a href="#">金融与投资</a> <a href="#">管理</a> <a href="#">励志与成功</a>
    </dd>
</dl>
<dl>
    <dt><a href="#">生活</a></dt>
    <dd>
        <a href="#">家教与育儿</a> <a href="#">旅游/地图</a> <a href="#">烹饪/美食</a> <a href="#">时尚/美妆</a> <a href="#">家居</a> <a href="#">婚恋与两性</a> <a href="#">娱乐/休闲</a> <a href="#">健身与保健</a> <a href="#">动漫/幽默</a> <a href="#">体育/运动</a>
    </dd>
</dl>
</div>
</body>

显示结果如下：

与效果图相比，这里应该是缩进去的，左边大类是一列，右边明细又是一列，那么为什么会缩进去呢？我们给<dt>和<dd>加个边框就明白了，<dt>绿色边框，<dd>红色边框

如上图，<dt>设置了float:left之后，就脱离了标准文档流，所以这个时候后面的<dd>盒子就忽略了<dt>的存在，顶到了前面，但是，<dd>盒子的内容却看到了<dt>盒子，所以会自动排到<dt>的后面，而下一行，<dt>盒子的高度有限，空出了位置，<dd>的内容自然顶到了前面，导致上下两行不齐；这个时候，如果让<dd>盒子继续看到<dt>盒子，靠着<dt>盒子，就可以达到我们要的效果了。

上面解释看不懂的可以看链接：https://www.zhihu.com/question/24529373　　张秋怡的回到，很生动，秒懂！

这个时候，就在<dd>样式里加上overflow: hidden;就可以清除<dt>浮动给<dd>造成的影响了，加上后，效果如图：

css:

body div dl dd{border: 2px red solid;overflow: hidden;}

去掉边框，如图：

当然这个时候还没有给小类加左边框，后面细说；

overflow:hidden清楚浮动的影响的更多相关文章

  1. overflow:hidden清除浮动原理解析及清除浮动常用方法总结

    最近在看<CSS Mastery>这本书,里面有用overflow:hidden来清理浮动的方法.但是一直想不明白为什么能够实现清除浮动,查阅了网络上的解释,下面来总结一下. 一.首先来想 ...

  2. CSS 的overflow:hidden (清除浮动)

    verflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很 了解.一提到清除浮动,我们就会想到另外一个CSS样式: ...

  3. css中：overflow:hidden清除浮动的原理

    要想彻底清除浮动的影响,适合的属性不是 clear 而是 overflow. 一般使用 overflow:hidden,利用 BFC 的“结界”特性彻底解决浮动对外部或兄弟元素的影响. 1. 前言: ...

  4. css 中 overflow: hidden清楚浮动的真正原因

    1. 先上一段代码清楚浮动的代码, 外层ul设置overflow为hidden, 内层li设置float为left左浮动 <!DOCTYPE html> <html> < ...

  5. overflow:hidden清除浮动原理

    overflow:hidden的意思是超出部分去掉,如果父元素height为auto,内部元素浮动,势必会将内部元素全部隐藏,故计算出内部浮动高度顺便清除浮动.

  6. 为什么overflow:hidden能达到清除浮动的目的？

    1. 什么是浮动 <精通CSS>(第3版)关于浮动的描述: 浮动盒子可以向左或向右移动,直到其外边沿接触包含块的外边沿,或接触另一个浮动盒子的外边沿. 浮动盒子也会脱离常规文档流,因此常规 ...

  7. overflow:hidden 影响inline-block元素周围元素下移

    前言: 最近在切页中,我想实现左边一个类似下拉选框,且不允许输入,右边有一段垂直居中的文字描述的效果.我对文字用的是p标签.其实可以用个i/b/em等其他行内标签,同时也具有一定语义,做为强调提示,( ...

  8. CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性

    最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里 ...

  9. 关于overflow:hidden的作用（溢出隐藏，清除浮动，解决外边塌陷等等）

    1.overflow:hidden  溢出隐藏 给一个元素中设置overflow:hidden ,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位. 代码如下: 运行结果 ...

随机推荐

  1. [CentOS7服务器] 更改系统时间

    未知何故,服务器上的系统时间不对,比实际的UTC快了将近63分钟.在涉及本地文件与远程服务器文件的时间戳校验时,容易产生混淆. 这里把系统时间更正的过程记录如下. 参考资料:http://www.ce ...

  2. DB

    数据库(DB):1:降低存储数据的冗余度.2:更高的数据一致性.3:存储的数据可以共享.4:可以建立数据库所遵循的标准. 关系型数据库(RDBMS):基本单位就是表.一张表就是一个实体.MYSQL语句 ...

  3. 移动apache访问日志后如何立即生效

    一次偶然测试发现移动了apache下的access_log日志后或者修改了access_log的名称,该移动的日志或修改名称的日志文件仍记录了apache访问信息,即没有实时生效,后来查了资料才知道: ...

  4. Android FragmentTransactionExtended：使Fragment以多种样式动画切换

    有多种fragment之间切换的效果,效果是这样的: Demo的实现是很简单的. 在res/values中,新建一个arrays.xml文件,存放Fragment动画效果的名称,在spinner中使用 ...

  5. 【软件工具】Driver Booster3永久激活法

    原作者網址:erik2041999 (YouTube) 1.安装Driver Booster3 (档案已附) 2.使用此启动码0187E-B9764-4D9FA-211B3断网启动 3.保持断网状态并 ...

  6. 中国B2B行业将进入后平台时代

    中国的B2B正在进入后平台时代,我们用三个特征来诠释这个词:1.电商平台构建流程闭环服务,从电商平台向综合服务商转变:2.新流量批发策略的落地代表B2B找到了新入口:3.第三方服务的价值变现与第二波创 ...

  7. IIS 7.5 发布Web 网站步骤

    1. 添加删除程序中,点击打开或关闭Window 功能 , 如图 , 勾选: 2. 打开 vs开发工具 控置台程序 , 注册 aspnet_regiis -i 3.设置应用程序域为指定版本 4.设置应 ...

  8. 将Jquery序列化后的表单值转换成Json

    From: https://segmentfault.com/a/1190000000473625 小朋友有一个表单,他想以Json的方式获取到表单的内容.小朋友尝试了以下方式. 通过$(" ...

  9. JQuery 判断不同浏览器

    if($.browser.msie) {          //IE浏览器alert("this is msie"); } else if($.browser.safari)   ...

  10. pdf2swf , xpdf 部分用法

    http://hi.baidu.com/abpsoft/item/1d1eb0f50c9d1fd86225d2c0 pdf2swf详细参数使用说明 官方地址:http://www.swftools.o ...