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

如果左边用<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. 前端面试题 之 JavaScript

    昨天我们一起分享了关于html和css的面试题<前端面试题之Html和CSS>,今天我们来分享关于javascript有关的面试题.我面试的时候最害怕面试官问我js了,因为我真心不擅长这个 ...

  2. 测试键盘的控制字符对应的ASCII码值

    #include <stdio.h>#include <termio.h>      //终端操作头文件 char getch(void){     struct termio ...

  3. 【仿真】Lattice_Diamond_调用Modelsim_仿真

    仿真前的准备工作:在modelsim中添加lattice仿真库:1.去除modelsim安装目录下modelsim.ini的只读属性.2.打开modelsim,更改目录File>Change d ...

  4. Office 365 SharePoint 使用Charts Web Part

    如果你在web part->业务数据下找不到Charts Web Part 可以修改你的URL https://goitmch.sharepoint.com/sites/xxxx/_layout ...

  5. Bootstrap<基础四> 代码

    Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 <pre> 标 ...

  6. CSS3入门--线条动画特效实例

    HTML: <div></div> CSS: div{ width: 200px; height: 200px; margin: 200px auto; background: ...

  7. HDU 2669

    题目大意: 已知线性方程ax+by=1; 输入a, b的值, 要求输出整数解x, y的值(输出x, y的最小整数解), 若没有解, 输出"sorry".   分析: 求线性方程的解 ...

  8. Java泛型中的? super T语法

    ? super T 语法将泛型类限制为所有T的超类(包括T自身),但只能用于参数中,不可以在返回值用加以限定.如果不加以限定,假设某个函数头为? super Manager get()由于编译器不知道 ...

  9. web 页面上纯js实现按钮倒计数功能

    需求构思:本功能想实现的是,一个按钮在页面载入就显示提醒续费,,,倒数60秒后,完成提醒功能,可以按另外一个页面跳转到主页. 参考网上的大神,实现如下:Button2倒数,Button3跳转,在页面上 ...

  10. 安装了简易版XP系统后不能安装IIS的解决办法

    第一步 找到C:\WINDOWS\inf文件夹中的sysoc.inf文件,在 [Components]区域中的NetOC=netoc.dll,NetOcSetupProc,netoc.inf,,7和c ...