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 的样式在这里我就不写了,具体样式点击此处. 下面就 ...
随机推荐
- SpringBoot防XSS攻击
1 . pom中增加依赖 <!-- xss过滤组件 --> <dependency> <groupId>org.jsoup</groupId> < ...
- vue之this.$route.params和this.$route.query的区别
1.this.$route.query的使用 A.传参数: this.$router.push({ path: '/monitor', query:{ ...
- LC327 Count of Range Number
这一题,我们使用了分治法. 首先看时间复杂度为o(n^2),比较naïve的方法: 使用一个数组sum[],长度为原数组长度+1,每一个元素sum[i]为原数组中index0~i-1之和,显然当sum ...
- PHP搜索优化 sphinx 搭建测试
安装.环境:win7 64位 1.下载sphinx文件包 下载地址:http://sphinxsearch.com/downloads/archive/ 2.解压到D:/sphinx.新建文件夹dat ...
- 通过java打开jar 文件
JAR文件是许多信息经过封装后形成的捆绑体.也就是一个压缩文件. JAR 文件格式提供了许多优势和功能,其中很多是传统的压缩格式如ZIP或者RAR所没有提供的,JAR文件 还用于安排和封装库.组件和插 ...
- WPF 单个模块换肤
xmal: <Window x:Class="wpfSkin.MainWindow" xmlns="http://schemas.microsoft.com/win ...
- JSP-http和tomcat
一 Http 1.1 javaweb概述 1.2 http协议的概述 1.什么是Http协议 HTTP,超文本传输协议(HyperText Transfer Protocol)是互联网上应用最为广泛的 ...
- c++新特性实验(1)预处理
1.参考资料 1.1 C++ C++17 标准文档(正式) : https://www.iso.org/standard/68564.html C++ 标准文档(草案) : ht ...
- jQuery的deferred对象使用详解【转载】
一.什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们 ...
- 总体<导学>
有一些奇奇怪怪的数据集 波士顿房价数据集 使用sklearn.datasers.load_boston 加载相关的数据集 重要参数 return_X_y 表示是否返回target (价格) 默认为Fa ...