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

如果左边用<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. 关于EM，REM，PX的几点注意

    px是绝对单位,不支持IE的缩放,em是相对单位. em指字体高,任意浏览器的默认字体高都是16px.所以未经调整的浏览器都符合: 1em=16px.那么12px=0.75em, 10px=0.625 ...

  2. Jquery做全选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Bootstrap<基础二十> 标签

    Bootstrap 标签.标签可用于计数.提示或页面上其他的标记显示.使用 class .label 来显示标签,如下面的实例所示: <!DOCTYPE html> <html> ...

  4. 不同版本jq冲突问题

    在网上找了几个qq客服的js代码,本地调试没问题一加到网站上就出现问题了各种不对.最后发现是jq的问题,网站中有不同的jq冲突了,解决方法: <script>var $j = jQuery ...

  5. 最简单的RASPBERRY PI wifi配置

    Setting up Wifi with the Command Line  SIMON MONK   This tutorial works best if your router is broad ...

  6. java.lang.Boolean->介绍

    介绍: public class Boolean extends Object implements Serializable, Comparable<Boolean> Boolean类是 ...

  7. springMVC之<context:annotation-config />标签

    springMVC的配置文件中经常见到<context:annotation-config/>,那么这句话的作用到底是什么呢? 现在的注解非常方便,但是系统如何才能识别注解呢,这就需要相应 ...

  8. 同上 遍历obj的值 来定义当前的后台数据在页面的定位

    function getlistRoom(obj) { //obj就是通过ajax传过来的 data for (var i = 0; i < obj.length; i++) {//遍历数据 v ...

  9. placeholder 不支持IE修复

    <script type="text/javascript"> var JPlaceHolder = { //检测 _check : function(){ retur ...

  10. Comparison method violates its general contract 关于jdk自带算法问题

    昨晚上线,线上报了一个问题,用的jdk8,用的collections.sort方法, public static void main(String[] args) { List<Integer& ...