overflow:auto/hidden的应用
一、自适应两栏布局
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自适应两栏布局</title>
<style>
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
overflow:auto;
<!--当触发main生成BFC后(overflow值可为auto或者hidden，只要不是visible)这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄。-->
}
</style>
</head>
<body>
<div class="aside">1</div>
<div class="main">2</div>
</body>
</html>
但是，如果是两个图片，而不是两个div，那么如果对图片设置float，在绝大多数浏览器里会认为它左对齐且与相邻元素在同一行显示，所以图片2会和它在同一行内出现，而不会钻到图片1的下面。
二、清除内部浮动
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>清除内部浮动</title>
<style>
.par {
border: 5px solid red;
width: 300px;
overflow:auto;<!--因为内部浮动，就脱离了par，当没有加上这个条件时，par如果没有设置高度，就不会被撑开。为达到清除内部浮动，我们可以触发par生成BFC（overflow:auto或者hidden），那么par在计算高度时，par内部的浮动元素child也会参与计算。-->
}
.child {
border: 5px solid green;
width:100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
三、防止margin重叠
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>防止margin重叠</title>
<style>
p {
color:#000;
background:blue;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
.wrap{
overflow:auto;<!-- 原来两个p之间的距离为100px，即margin重叠，当我们在p外面包裹一层容器，并触发该容器生成一个BFC（overflow:auto;或者hidden）。那么两个P便不属于同一个BFC，就不会发生margin重叠了。-->
}
</style>
</head>
<body>
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>
</body>
</html>
overflow:auto/hidden的应用的更多相关文章
- 【总结整理】overflow: auto/hidden;清除自己
.top-nav{ font-size: 12px; font-weight: bold; list-style-type: none; border-bottom: 8px solid #DC4E1 ...
- 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动
原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽 ...
- 为什么设置overflow为hidden可以清除浮动带来的影响
1.问题起源 在平时的业务开发写CSS中,为了满足页面布局,元素的浮动特性我们用的不能再多了.使用浮动的确能够解决一些布局问题,但是也带了一些副作用影响,比如,父元素高度塌陷,我们有好几种可以清除浮动 ...
- 让overflow:auto页面滚动条出现时不跳动
今天看到一篇张鑫旭的文章,转载过来.https://www.zhangxinxu.com/wordpress/2015/01/css-page-scrollbar-toggle-center-no-j ...
- overflow:auto学习
一直认为没认为这个属性没什么大的用处,最近在使用一次iscroll时一直浮动到顶部层上面找了半天,发现可以用这个属性解决. 1.功能1,清除浮动.设置overflow并不会在该元素上清除浮动,它将清除 ...
- 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动——张鑫旭
小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 这篇文章发布于 2015年01月25日,星期日,23:08,归类于 css相关. 阅读 46274 次, 今日 91 次 by ...
- CSS清除浮动常用方法小结 CSS clear both {overflow:auto;zoom:1;}
常用的清除浮动的方法有以下三种: 此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景 <!DOCTYPE html><html><head> <met ...
- 详解为什么设置overflow为hidden可以清除浮动带来的影响
1.问题起源 在平时的业务开发写CSS中,为了满足页面布局,元素的浮动特性我们用的不能再多了.使用浮动的确能够解决一些布局问题,但是也带了一些副作用影响,比如,父元素高度塌陷,我们有好几种可以清除浮动 ...
- 让超出div内容的显示滚动条：overflow:auto，以及overflow其它属性
css的属性,以前没用过遇到了,记录一下: 虽然layui本来自带这个处理,但是为了灵活,抛弃layui原有的加载,只是用layui的样样式,就要使用到这个css属性 总结overflow属性: /* ...
随机推荐
- c# 遍历子控件,比如Form下的group,或者panel
方法很好用.目的是遍历所有容器的子控件... 方法1private void GetControl(Control.ControlCollection ctc, ref int checkNull) ...
- YTU 2991: 链表节点逆置（线性表）
2991: 链表节点逆置(线性表) 时间限制: 1 Sec 内存限制: 128 MB 提交: 14 解决: 6 题目描述 设计一个算法,将一个带头节点的数据域依次为a1,a2,-,an(n> ...
- 如何将vs2012项目的网站布置到iis上，实现内网访问
1首先获得你本机的ip地址 可以通过命令行输入 ipconfig/all 2配置电脑的iis(前提是你已经安装了) 右击我的电脑选择管理 右键网站添加网页 会出来上面的对话框 选择直接的项目web路径 ...
- 2007 Asia - Nanjing F题，字典树
题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&category=2 ...
- 提高开发效率的 Eclipse 实用操作
工欲善其事,必先利其器.对于程序员来说,Eclipse便是其中的一个“器”.本文会从Eclipse快捷键和实用技巧这两个篇章展开介绍.Eclipse快捷键用熟后,不用鼠标,便可进行编程开发,避免鼠标分 ...
- Sql Server 2008完全卸载方法(其他版本类似)
一． SQL2008卸载. 1.从控制面板卸载 1)点击计算机右下角“开始”,点击“控制面板” 2)点击“卸载程序”. 3)在程序列表中找到“Microsoft SQL Server 2008” ...
- 2016年6月26日 星期日 --出埃及记 Exodus 14:23
2016年6月26日 星期日 --出埃及记 Exodus 14:23 The Egyptians pursued them, and all Pharaoh's horses and chariots ...
- 配置 ASP.NET Linux( CentOS 6.5 ) 运行环境 MONO + Jexus
1.更新系统 在命令行下执行 yum –y update 2.安装必要的软件 yum -y install gcc gcc-c++ bison pkgconfig glib2-devel gettex ...
- 常用PDF文档开发库
C++库: 1,PDF类库 PoDoFo http://podofo.sourceforge.net/ PoDoFo 是一个用来操作 PDF 文件格式的 C++ 类库.它还包含一些小工具用来解析 ...
- Centos 中如何快速定制二进制的内核RPM 包
随着Linux服务器越来越多了,底层系统内核想要保持版本统一就需要定制专门的二进制安装包来便捷的升级和管理. RedHat系那当然就是使用rpmbuild来做定制化管理了. 今天我们分俩个部分(roo ...