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#的OpenFileDialog和SaveFileDialog的常见用法（转）
OpenFileDialog openFileDialog1 = new OpenFileDialog(); openFileDialog1.InitialDirectory = ...
- app缓存设计-文件缓存
采用缓存,可以进一步大大缓解数据交互的压力,又能提供一定的离线浏览.下边我简略列举一下缓存管理的适用环境: 1. 提供网络服务的应用 2. 数据更新不需要实时更新,哪怕是3-5分钟的延迟也是可以采用缓 ...
- Andorid 编程 系统环境安装
内网环境下安装: 1.配置源 :找到公司内部整理的源文件中的内容,将其内容拷贝到系统 源文件 中,并注释掉所有外网链接(如果公司支持内部环境配置,通常会有一个内部源文件) 2.安装jdk, ecli ...
- SDUT 2413:n a^o7 !
n a^o7 ! Time Limit: 1000MS Memory limit: 65536K 题目描述 All brave and intelligent fighters, next you w ...
- Accepted Necklace
Accepted Necklace Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) T ...
- Linux高级变量
http://blog.chinaunix.net/uid-27040051-id-3450991.html 高级变量 基本形式 [1].变量扩展 格式 ${变量名称} [2].命令扩展 格式 $(命 ...
- common-pool2 使用
common-pool2提供了3中对象池管理方式,它们的使用方式基本一样,这里以GenericObjectPool对象池为例介绍其使用方式,一般实现自己的对象池需要经过2个步骤 1.实现PooledO ...
- PHP比较运算!=和!==
PHP!=和!==的区别 !==是指绝对不等于,比如,$a = 3, $b="3" 那么,$a!==$b成立,可是$a!=$b不成立:
- apahce
基本的操作方法:本文假设你的apahce安装目录为/usr/local/apache2,这些方法适合任何情况 apahce启动命令:推荐/usr/local/apache2/bin/apachectl ...
- Python3基础 type获取变量的类型
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...