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属性: /* ...
随机推荐
- Android 坐标与宽高研究getLeft() getTop() getRight()和getBottom()
把view看做一个矩形,分别表示的是一个view的左边,上边,右边,下边距离他的父组件的距离. getRight() =getLeft() + getWidth() getBottom()= getT ...
- Balance
Balance Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 11947 Accepted: 7464 Description ...
- windows下TCP服务器和客户端的实现
服务器 1.初始化 WSAStartup(..) 2.创建Socket s = Socket ( .. ) 3.绑定端口 ret = bind ( ... ) 4.监听 ret = ...
- web简单连接html文件测试
Web工程: 条件: apache-tomcat-6.0.20(文件夹/7.0)=======位于E盘 标题:链接服务器 步骤: 第一步:打开apache-tomcat-6.0.20-bin-star ...
- 灰色预测模型 c# 算法实现
public class GrayModel { private double a0, a1, a2; private int size; priva ...
- C#常用扩展方法
/// <summary> /// 转换 /// </summary> public static class ConversionHelper { #region 数据格式转 ...
- phpcms 01
1 安装完成phpcms,然后打开2 C:\wamp\www\phpcms\templates 复制下面的default 目录,改名为ypzy2014 3 修改ypzy2014文件夹下的config配 ...
- 2013年江西理工大学C语言程序设计竞赛（高级组）
A 解法:dfs搜索,注意一个剪枝,否则会超时(听说原本是个dp)? #include<stdio.h> //#include<bits/stdc++.h> #include& ...
- RabbitMQ术语
工作队列:Working Queue 分配:多个客户端接收同一个Queue,如何做负载均衡(分配). Round-robin分配:多个接收端接收同一个Queue时,采用了Round-robin ...
- javascript实现二分查找
今天做了道笔试题,要求是实现二分查找,当然不难,想了一下,因为没有要求语言就用javascript实现了.当然,期间还是出来了一点问题. ok,上代码 /* * 稳定二分查找 * 作者:吴伟欣 * * ...