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

如果左边用<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. 【仿真】Lattice_Diamond_调用Modelsim_仿真

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

  2. Eclipse JUnit 生成报告

    http://blog.sina.com.cn/s/blog_8af106960102v6qh.html 对Eclipse的工程写单元测试: 第一步: 1. 一个工程有多个测试类,将测试类放到一个测试 ...

  3. linux中用户的主目录～

    -在Linux中代表用户主目录 对一般用户,-表示/home/(用户名) 对于root用户,-表示/root 如果要查看-的真实面貌,可以先进入-目录,然后用pwd -P命令查看-的绝对路径 cd ~ ...

  4. Linux 动态链接库

    如何使用动态链接库 Linux下打开使用动态链接库需要三步(实际上和windows下基本一样):1.加载动态链接库,通过调用库函数dlopen()获得链接库的句柄,对应于windows下的 AfxLo ...

  5. ASP.NET DAY1

    <!-- AutoEventWireup,CodeBehind,Inherits等属性可省略, Language属性为必须项 --> <%@ Page Language=" ...

  6. CentOS 6.6编译安装Nginx1.6.2+MySQL5.6.21+PHP5.6.3

    http://www.osyunwei.com/archives/8867.html 一.配置防火墙,开启80端口.3306端口 vi /etc/sysconfig/iptables #编辑防火墙配置 ...

  7. Ruby Cucumber环境

    1.http://rubyinstaller.org/downloads 下载rubyinstaller以及developmentkit(注意版本号要对应) 2.安装rubyinstaller以及解压 ...

  8. php __invoke 和 __autoload

    当在对象后面添加()时候调用 __invoke <?php class Person { private $name; private $age; public function __const ...

  9. Google 开源技术protobuf

    http://blog.csdn.net/hguisu/article/details/20721109#0-tsina-1-1601-397232819ff9a47a7b7e80a40613cfe1 ...

  10. S5PV210之GPIO模拟I2c时序之pcf8591与at24xx linux3.0.8驱动

    目录:一. 说明 二. 驱动程序说明及问题 三. 案例一       四. 案例二 一. 说明 mini210开发板上带了at24c08, 看了linux内核自带的at24.c的驱动程序,编译下载到看 ...