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属性: /* ...
随机推荐
- 【转】Eclipse Console 加大显示的行数，禁止弹出
转载地址:http://blog.csdn.net/leidengyan/article/details/5686691 Eclipse Console 加大显示的行数: 在 Preferences- ...
- YTU 3004: 栈的基本运算（栈和队列）
3004: 栈的基本运算(栈和队列) 时间限制: 1 Sec 内存限制: 128 MB 提交: 32 解决: 10 题目描述 编写一个程序,实现顺序栈的各种基本运算,主函数已给出,请补充每一种方法 ...
- Cookie机制（会话cookie和持久化cookie）在客户端保持HTTP状态信息的方案
1. Cookie只有一个name和一个value,不同于map;购物车设计的时候需要cookie,获取购物车的cookie id,以便于将物品多次放入购物车: 2.cookie获取了其地址,并且可以 ...
- Android动画之Interpolator和AnimationSet
AnimationSet可以加入Animation,加入之后设置AnimationSet对加入的所有Animation都有效. AnimationSet anim=new AnimationSet(t ...
- Android内存Context泄露：Handler&内部类
1 public class SampleActivity extends Activity { 2 3 private final Handler mLeakyHandler = new Handl ...
- offsetHeight 正则表达式验证格式
获取Div 的height width等属性 <%@ Page Language="C#" AutoEventWireup="true" CodeFile ...
- python学习笔记一 python入门（基础篇）
简单介绍一下python2.x和3.5的区别 print 在python3.5中print 变为print() Old: print * New: print( * ) 如果想要不换行,之前的 ...
- Storm系列之二——Guaranteeing Message Processing
Storm保证每跳离开spout的消息都会被完全处理.本文介绍Storm是怎么保证每条消息都被完全处理并且作为用户该怎么做才能从Storm的可靠性保证受益. 1.什么叫消息被完全处理? 一个tuple ...
- LKDBHelper小细节
1,用LKDBHelper插入数据 如果主键一致 就自动删除之前的插入新的数据: 此为:根据主键保持数据的唯一性. 主键相同自动覆盖,相当于修改.
- oracle 主键自增
将表t_uaer的字段ID设置为自增:(用序列sequence的方法来实现) ----创建表 Create table t_user( Id number(6), userid varchar2(20 ...