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

如果左边用<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. [转载] 百度上传&下载脚本

    下载百度网盘中的文件,最简单的办法是使用wget命令.找到百度网盘文件,点击下载,然后找到相应的下载地址,复制链接地址即可.但这种方法有一个bug,因为百度云网盘访问文件的链接地址是动态的,当文件比较 ...

  2. centos 6安装epel

    1.通过:https://mirrors.ustc.edu.cn/找到epel rpm包链接,这里的是 https://mirrors.ustc.edu.cn/epel/epel-release-la ...

  3. spring开发的总结

    1,当出现无法创建bean,( Error creating bean with name 'fileUploadService': Injection of resource dependencie ...

  4. Nuget包之间的依赖

    为什么我们使用依赖呢??原因是某些资源是基于某些资源的基础上才可以运行的,比如bootstrap基于Jquery,EntityFramework.zh-Hans基于EntityFramework,如果 ...

  5. f(n) hdu 2582

    calculate the f(n) . (3<=n<=1000000)f(n)= Gcd(3)+Gcd(4)+-+Gcd(i)+-+Gcd(n).Gcd(n)=gcd(C[n][1],C ...

  6. MFC-01-Chapter01:Hello,MFC---1.2 MFC简介

    1.2 MFC简介 MFC是Microsoft提供的放置Windows API的面向对象的包装的C++类库.MFC大约封装了好几百个类,其中有一些可以直接调用,有些类可以作为用户自己的类的基类.一些M ...

  7. http_load

    wget http://acme.com/software/http_load/http_load-12mar2006.tar.gz

  8. JAVA多线程超时加载当网页图片

    先上图: 这一次没有采取正则匹配,而采取了最简单的java分割和替代方法进行筛选图片 它能够筛选如下的图片并保存到指定的文件夹 如: “http://xxxx/xxxx/xxx.jpg” 'http: ...

  9. Python学习笔记-抽象

    懒惰即美德.代码量少. hasattr判断函数是否可用. 创建函数. def hello(name) return 'hello,'+name+'!' 文档化函数: 加注释(#开头) 文档字符串.函数 ...

  10. UliPad ----python 开发利器

    安装wxPython                                                                                          ...