overflow:hidden清楚浮动的影响
在网页布局中有时会遇到这种情况:
如果左边用<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清楚浮动的影响的更多相关文章
- overflow:hidden清除浮动原理解析及清除浮动常用方法总结
最近在看<CSS Mastery>这本书,里面有用overflow:hidden来清理浮动的方法.但是一直想不明白为什么能够实现清除浮动,查阅了网络上的解释,下面来总结一下. 一.首先来想 ...
- CSS 的overflow:hidden (清除浮动)
verflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很 了解.一提到清除浮动,我们就会想到另外一个CSS样式: ...
- css中:overflow:hidden清除浮动的原理
要想彻底清除浮动的影响,适合的属性不是 clear 而是 overflow. 一般使用 overflow:hidden,利用 BFC 的“结界”特性彻底解决浮动对外部或兄弟元素的影响. 1. 前言: ...
- css 中 overflow: hidden清楚浮动的真正原因
1. 先上一段代码清楚浮动的代码, 外层ul设置overflow为hidden, 内层li设置float为left左浮动 <!DOCTYPE html> <html> < ...
- overflow:hidden清除浮动原理
overflow:hidden的意思是超出部分去掉,如果父元素height为auto,内部元素浮动,势必会将内部元素全部隐藏,故计算出内部浮动高度顺便清除浮动.
- 为什么overflow:hidden能达到清除浮动的目的?
1. 什么是浮动 <精通CSS>(第3版)关于浮动的描述: 浮动盒子可以向左或向右移动,直到其外边沿接触包含块的外边沿,或接触另一个浮动盒子的外边沿. 浮动盒子也会脱离常规文档流,因此常规 ...
- overflow:hidden 影响inline-block元素周围元素下移
前言: 最近在切页中,我想实现左边一个类似下拉选框,且不允许输入,右边有一段垂直居中的文字描述的效果.我对文字用的是p标签.其实可以用个i/b/em等其他行内标签,同时也具有一定语义,做为强调提示,( ...
- CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性
最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里 ...
- 关于overflow:hidden的作用(溢出隐藏,清除浮动,解决外边塌陷等等)
1.overflow:hidden 溢出隐藏 给一个元素中设置overflow:hidden ,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位. 代码如下: 运行结果 ...
随机推荐
- ionic单页面应用中微信分享的问题总结
首先说一下 ionic 是单页面应用,也就是说整个项目就有一个index.html, 那么问题就就来了, 如果我们不同的页面要分享给大家的是不同的链接和图片,应该怎么去做呢? 这就是我们今天要总结的东 ...
- WebStorm常用配置
设置 快捷键设置 可以采用多种风格,这里采用Visual Studio风格,便于习惯使用其它IDE的用户迁移. JavaScript版本设置 JavaScript的主流版本已升至ESMAScript6 ...
- 启动Mysql服务提示Can’t connect to local MySQL server through socket的解决方法
启动Mysql服务常会提示下面错误: ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/ ...
- LeetCode之Unique Binry Search Trees
4月份很快就过半了,最近都在看WPF,有点落伍了...本来想写一点读书笔记的,还没想好要怎么写.所以为了能够达到每月一篇博客的目标,今天先说一个LeetCode上的面试题:Unique Binary ...
- display:inline-block 和float:left 的区别
display:inline-block 和float:left 的区别 display是指显示状态,float是针对块级元素的浮动. 使用inline-block:控制元素的垂直对齐跟横向排列元 ...
- C#中Dictionary<TKey,TValue>排序方式
自定义类: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Sy ...
- Centos配置国内yum源
网易(163)yum源是国内最好的yum源之一 ,无论是速度还是软件版本,都非常的不错,将yum源设置为163yum,可以提升软件包安装和更新的速度,同时避免一些常见软件版本无法找到.具体设置方法如下 ...
- WebDriver 常见Exception处理
1. org.openqa.selenium.WebDriverException: unknown error: unhandled inspector error: {"code&quo ...
- JS总结 运算符 条件语句
算术运算符+-*/ 与数学计算一致,配合()号进行各种计算 另外,+号还可以达到连接的作用.例如: var a = 15; alert("a的值等于"+a); 前后增减量运算符: ...
- Go语言并发编程示例 分享(含有源代码)
GO语言并发示例分享: ppt http://files.cnblogs.com/files/yuhan-TB/GO%E8%AF%AD%E8%A8%80.pptx 代码, 实际就是<<Go ...