css技巧:清除浮动
1、常用方法——overflow
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1。
不过不能和position配合使用,因为超出的尺寸的会被隐藏。
overflow:auto会在内部宽度超过父元素时出现滚动条。
在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。
2、终极方法——伪元素
如果遇到水平排列列表需要按情况显示二级子菜单的情况,使用overflow就会影响耳机子菜单了。
这时候就要在需要清除浮动的元素上设置伪元素:after,:before
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">课程大厅</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">学习中心</a>
<ul>
<li><a href="#">视频学习</a></li>
<li><a href="#">案例学习</a></li>
<li><a href="#">交流平台</a></li>
</ul>
</li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</ul> <style>
.menu:before,.menu:after{/*清除浮动终极办法*/
content: '';
display: table;/*display的值也可以是block*/
}
.menu:after{
clear: both;
}
</style>
3、可用但不推荐方法——浮动元素父容器也添加浮动属性
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">课程大厅</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">学习中心</a>
<ul>
<li><a href="#">视频学习</a></li>
<li><a href="#">案例学习</a></li>
<li><a href="#">交流平台</a></li>
</ul>
</li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
<style>
.menu{
width: 960px;margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: linear-gradient(#444,#111);
border-radius:6px ;
box-shadow: 0 1px 1px #777;
float:left;/*浮动元素的容器也添加浮动属性*/
}
}
</style>
3.1、可用但不推荐方法——固定父元素高度属性height
原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题 。
3.2、可用但不推荐方法——结尾处加空div且设置clear:both
原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度
不容易出现怪问题,但会出现很多空格,以前常用的解决方法。
<style type="text/css">
.div1{background:#000080;border:1px solid red}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD} .clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div> /*处理方法*/
</div>
3.3、可用但不推荐方法——结尾加<br/>
<style type="text/css">
.div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD} .clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<br class="clearfloat" /> /*处理方法*/
</div>
css技巧:清除浮动的更多相关文章
- 【css】清除浮动的几种方式
[css]清除浮动的几种方式 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...
- HTML&CSS基础-清除浮动
HTML&CSS基础-清除浮动 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看浮动效果 1>.HTML源代码 <!DOCTYPE html> &l ...
- CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...
- CSS clear清除浮动
1.CSS中的clear有四个参数: none:允许两边都可以浮动. left:不允许左边有浮动. right:不允许右边有浮动. both(默认):不允许有浮动. 2.一开始在CSS中clear浮动 ...
- 关于CSS中清除浮动的方法
在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...
- div+css之清除浮动
当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱的现象,可以通过清除浮动的方法来解决浮动的影响. 浮动的清理(clear): 值:none:默认值.允许两边都可以有浮动对象:l ...
- CSS中 清除浮动解决“包含问题”
今天看到大神对浮动定位作了个详细的分析 刚好就分析了当时任务三遇到的问题 在一个div中定义了三个div,让横向排列,结果父元素div的背景色显示不出来了 ,这是个经典问题----包含浮动 < ...
- CSS中清除浮动的作用以及如何清除浮动
1.什么是浮动,浮动的作用 “浮动”从字面上来理解就是“悬浮移动.非固定”的意思.块级元素(div.table.span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观.这就 ...
- CSS float清除浮动
解决高度塌陷的问题 – 清除浮动 CSS中有个讨论较多的话题就是如何清除浮动,清除浮动其实就一个目的,就是解决高度塌陷的问题.为什么会高度塌陷?什么时候会高度塌陷?塌陷原因是:元素含有浮动属性 – 破 ...
- 【css】清除浮动(clearfix 和 clear)的用法
本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋.关于 clearfix 和 clear 的样式在这里我就不写了,具体样式点击此处. 下面就 ...
随机推荐
- HDFS常用Java API
- Luogu P3295 [SCOI2016]萌萌哒(并查集+倍增)
P3295 [SCOI2016]萌萌哒 题面 题目描述 一个长度为 \(n\) 的大数,用 \(S_1S_2S_3 \cdots S_n\) 表示,其中 \(S_i\) 表示数的第 \(i\) 位, ...
- 获取MMSQL数据库表信息
SELECT 表名 then d.name else '' end, 表说明 then isnull(f.value,'') else '' end, 字段序号=a.colorder, 字段名=a.n ...
- TZ_16_Vue的idea入门
1.Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便 ...
- Yii 网站上线不需手动配置
参考: http://www.cnblogs.com/x3d/p/php_auto_prepend_file.html
- PHP--http_build_query--把数组化成&key=value方式
- VSCode 配置阿里云CentOS 7.6 远程开发
配置步骤 一.windows 10 开发机配置 windows 10 1809后支持ssh命令 1.生成ssh密钥.使用以下命令,先生成本地公钥和私钥ssh-keygen -t rsa -b 4096 ...
- postman发送get和post请求
一.postman发送get请求 在地址栏里输入请求url(用到拼接方式):http://127.0.0.1:8081/getuser?userid=1 选择“GET”方式, 点击“send”得到 ...
- java笔记之split
Java split()用法 特殊情况有 * ^ : | . \ 一.单个符号作为分隔符 String address="上海\上海市|闵行区\吴中路"; String[] sp ...
- POJ 3628 Bookshelf 2【背包型DFS/选or不选】
Bookshelf 2 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 11105 Accepted: 4928 Desc ...