一、自适应两栏布局

<!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的应用的更多相关文章

  1. 【总结整理】overflow: auto/hidden;清除自己

    .top-nav{ font-size: 12px; font-weight: bold; list-style-type: none; border-bottom: 8px solid #DC4E1 ...

  2. 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动

    原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽 ...

  3. 为什么设置overflow为hidden可以清除浮动带来的影响

    1.问题起源 在平时的业务开发写CSS中,为了满足页面布局,元素的浮动特性我们用的不能再多了.使用浮动的确能够解决一些布局问题,但是也带了一些副作用影响,比如,父元素高度塌陷,我们有好几种可以清除浮动 ...

  4. 让overflow:auto页面滚动条出现时不跳动

    今天看到一篇张鑫旭的文章,转载过来.https://www.zhangxinxu.com/wordpress/2015/01/css-page-scrollbar-toggle-center-no-j ...

  5. overflow:auto学习

    一直认为没认为这个属性没什么大的用处,最近在使用一次iscroll时一直浮动到顶部层上面找了半天,发现可以用这个属性解决. 1.功能1,清除浮动.设置overflow并不会在该元素上清除浮动,它将清除 ...

  6. 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动——张鑫旭

    小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 这篇文章发布于 2015年01月25日,星期日,23:08,归类于 css相关. 阅读 46274 次, 今日 91 次 by ...

  7. CSS清除浮动常用方法小结 CSS clear both {overflow:auto;zoom:1;}

    常用的清除浮动的方法有以下三种: 此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景 <!DOCTYPE html><html><head> <met ...

  8. 详解为什么设置overflow为hidden可以清除浮动带来的影响

    1.问题起源 在平时的业务开发写CSS中,为了满足页面布局,元素的浮动特性我们用的不能再多了.使用浮动的确能够解决一些布局问题,但是也带了一些副作用影响,比如,父元素高度塌陷,我们有好几种可以清除浮动 ...

  9. 让超出div内容的显示滚动条：overflow:auto，以及overflow其它属性

    css的属性,以前没用过遇到了,记录一下: 虽然layui本来自带这个处理,但是为了灵活,抛弃layui原有的加载,只是用layui的样样式,就要使用到这个css属性 总结overflow属性: /* ...

随机推荐

  1. Android App 开发常用的xUtils框架

      最近搜了一些框架供初学者学习,比较了一下XUtils是目前git上比较活跃 功能比较完善的一个框架,是基于afinal开发的,比afinal稳定性提高了不少,下面是介绍: 鉴于大家的热情,我又写了 ...

  2. c#sqlhelper之用法

    MySqlParameter[] a=new MySqlParameter[]{new MySqlParameter("@stu_id",stu_id)}; 参数使用

  3. Who's in the Middle 分类： POJ 2015-06-12 19:45 11人阅读 评论(0) 收藏

    Who's in the Middle Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 34155   Accepted: 1 ...

  4. THE DRUNK JAILER 分类： POJ 2015-06-10 14:50 13人阅读 评论(0) 收藏

    THE DRUNK JAILER Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 24918   Accepted: 1563 ...

  5. git总结

    1.先画个图,先对git的操作有个直观了解 2.分析下git中文件是怎么存储的 正如下面所示git存储不是每次更改就会产生一个新的文件,而是产生一个版本,这个版本对应着记录每个文件的不同情况 具体的存 ...

  6. Java中的的XML文件读写

    XML简介 要理解XML,HTML等格式,先来理解文档对象模型DOM 根据 DOM,HTML 文档中的每个成分都是一个节点,这些节点组成了一棵树.DOM 是这样规定的:整个文档是一个文档节点每个 HT ...

  7. mvc ==》json url

    mvc ==>json 这也是.net 4.0 与4.5的区别,4.0 自带 ,而4.5 则要自己加上去,微软说是 當然,最簡單的應變措施就是直接把這段設定加回去,不過,加回去之前請三思,這條設 ...

  8. zImage.img、ramdisk.img、system.img、userdata.img介绍及解包、打包方法

    ramdisk.img system.img userdata.img介绍及解包.打包方法 Android 源码编译后,在out/target/product/generic下生成ramdisk.im ...

  9. 摩托罗拉SE4500 德州仪器TI Omap37xx/AM3715/DM3730/AM3530 wince6.0/Windows Mobile 6.5平台 二维软解调试记录及相关解释

    现在安卓大行其道,不是高通,就是MTK,甚至于很多人不知道还有德州仪器这个平台了,关于如何在德州仪器Omap37xx平台上调试SE4500,网络上除了针对SE4500的几个pdf文档介绍之外,没有任何 ...

  10. BZOJ 2627 JZPKIL

    题目链接:http://www.lydsy.com:808/JudgeOnline/problem.php?id=2627 题意:计算下面式子 思路: A先不管.我们来搞B部分.下面说如何计算B这个最 ...