css清除浮动方式总结
1.通过父元素overflow:hidden,缺点：超出部分隐藏，不推荐使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
.box{margin:50px;border:1px solid #ddd;overflow:hidden;}
.left{float:left;}
.right{float:right;}
</style>
</head>
<body>
<div class="box">
<div class="left">54</div>
<div class="right">33</div>
</div>
</body>
</html>
效果：
方式2：添加空标签并设置clear:both，缺点是额外添加空标签，不推荐使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
.box{margin:50px;border:1px solid #ddd;}
.left{float:left;}
.right{float:right;}
.slot{clear:both;}
</style>
</head>
<body>
<div class="box">
<div class="left">54</div>
<div class="right">33</div>
<div class="slot"></div>
</div>
</body>
</html>
方式3：通过伪类添加，既不会隐藏超出部分，又不多空标签，推荐使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
.box{margin:50px;border:1px solid #ddd;}
.box:after{content:'';display:block;clear:both;}
.left{float:left;}
.right{float:right;}
</style>
</head>
<body>
<div class="box">
<div class="left">54</div>
<div class="right">33</div>
</div>
</body>
</html>
css清除浮动方式总结的更多相关文章
- css清除浮动的方法汇总
这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...
- 什么是CSS清除浮动？
在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外 ...
- 【转】css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...
- css清除浮动float方法
转载:http://www.cnblogs.com/ForEvErNoME/p/3383539.html 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的 ...
- css清除浮动float的几种方法
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度, ...
- CSS清除浮动方法总结
什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高 ...
- 前端开发CSS清除浮动的方法有哪些？
在前端开发过程中,非IE浏览器下,当容器的高度自动,并且容器内容中有浮动元素(float为left或right),此时如果容器的高度不能自适应内容的高度,从而使得内容溢出破坏整体布局,这种现象叫做浮动 ...
- 前端之float的几种清除浮动方式
前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.float清除方式1 <!DOCTYPE ...
- css清除浮动大全共8种方法
原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...
随机推荐
- mybatis-generator 自动生成mapper以及实体类
研究了一下,感觉也不是特别方便,因为参数很多都是需要手动去配置的,如果在这个jar基础上在改造一下或许更方便一点. 具体实现代码如下: pom.xml <plugin> <group ...
- Python3环境搭建
Python3环境搭建 Windows系统下安装Python3 Python3 下载 Python3 最新源码,二进制文档,新闻资讯等可以在 Python 的官网查看到: Python 官网:ht ...
- LeetCode--036--有效的数独(java)
判断一个 9x9 的数独是否有效.只需要根据以下规则,验证已经填入的数字是否有效即可. 数字 1-9 在每一行只能出现一次. 数字 1-9 在每一列只能出现一次. 数字 1-9 在每一个以粗实线分隔的 ...
- Django细节小记
前记:Django的ORM.模块有很多函数细节,要学会多看文档学习函数的细节 聚合annotate()和aggregate()的使用 简言之,annotate()得到的是查询集,类似all(),只不过 ...
- C# 一些不注意知识点：命名空间，等级，class等等
C# 命名空间表示域,控制着域内的对象. 命名空间是第一等级,class,delegate,enum,interface,struct是第二等级: 方法,属性,字段,索引,事件,常量,构造函数,终结器 ...
- Weblogic WLS-WebServices组件反序列化漏洞复现
漏洞分析: 当weblogic使用WLS-WebServices组件时,该组件会调用XMLDecoder解析XML数据,由此就产生了该漏洞 影响版本: weblogic<10.3.6版本 复现过 ...
- LVM方式安装Ubuntu 系统
重装Ubuntu系统,使用LVM管理磁盘,最好不要使用默认的LVM安装方式,而应挂载U盘启动盘,进行物理磁盘分区,创建物理卷.卷组.虚卷(即创建LVM系列操作),在安装系统时将虚卷挂载到文件目录上.将 ...
- subline 建立服务器
http://blog.csdn.net/csdn_chenli/article/details/53173953
- [luogu P3960] [noip2017 d2t3] 队列
[luogu P3960] [noip2017 d2t3] 队列 题目描述 Sylvia 是一个热爱学习的女♂孩子. 前段时间,Sylvia 参加了学校的军训.众所周知,军训的时候需要站方阵. Syl ...
- 从零开始学Python 二
上一章我们已经安装好了Python环境,并且写出了第一个Python程序.下面我们接着继续学习.首先,来分析下上一章我们写的代码. 我们最初的目的是为了可以输出一串有意义的文字,最终选择了英文语句“h ...