CSS(一)清除浮动
问题1:关于清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.father{
background: #ccc;
}
.box1,.box2,.box3{
float: left;
height: 60px;
background: red;
margin: 15px;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<p class=""></p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
</body>
</html>
以上是浮动事故发生现场,截图如下:
和box加了margin之后
当我们在style中写个样式p{clear:both;}
问题解决。
因此,以后遇到这种情况可以创建一个空的p然后加入样式clear:both解决
这就是关于清楚浮动,总计有三种方法
- 添加子元素并且写上
clear:both
- 在父元素.father中添加
overflow:hidden
. - 使用after伪对象清除,但是此方法只适用于IE8以上的(下面的代码是方法3)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.father{
background: #ccc;
}
.box1,.box2,.box3{
float: left;
height: 60px;
background: red;
margin: 15px;
}
.clear:after{
content: "";
width: 0;
height: 0;
display: block;
visibility: hidden;
clear: both;
}
</style>
</head>
<body>
<div class="father clear">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<p class=""></p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
</body>
</html>
问题2:关于脱离文档流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
list-style: none;
}
.nav>li{
float: left;
}
ul a{
display: block;
text-decoration: none;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
background-color: #2f3e45;
}
.nav>li:first-child a{
border-radius: 10px 0 0 10px;
}
.nav>li:last-child a{
border-radius: 0 10px 10px 0;
}
.drop-down{
position: relative;
}
.drop-down-content{
position: absolute;
padding: 0;
display: none;
}
h3{
font-size: 30px;
clear: both;
}
.nav .drop-down:hover .drop-down-content{
display: block;
}
.drop-down-content li:hover a{
background-color: red;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">首页</a></li>
<li class="drop-down"><a href="#">运动</a>
<ul class="drop-down-content">
<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>
<li><a href="#">怎么样</a></li>
</ul>
<h3>我是测试文字</h3>
</body>
</html>
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中清除浮动的作用以及如何清除浮动
1.什么是浮动,浮动的作用 “浮动”从字面上来理解就是“悬浮移动.非固定”的意思.块级元素(div.table.span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观.这就 ...
- CSS float清除浮动
解决高度塌陷的问题 – 清除浮动 CSS中有个讨论较多的话题就是如何清除浮动,清除浮动其实就一个目的,就是解决高度塌陷的问题.为什么会高度塌陷?什么时候会高度塌陷?塌陷原因是:元素含有浮动属性 – 破 ...
- 【css】清除浮动(clearfix 和 clear)的用法
本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋.关于 clearfix 和 clear 的样式在这里我就不写了,具体样式点击此处. 下面就 ...
- 【CSS】清除浮动的五种方式
清除浮动是一件功德无量的事情23333 这里记录一下清除浮动的多种方式 *首先要明确的是,为什么要清除浮动? A 影响其他元素定位 父盒子高度为0,子盒子全部浮动.定位,子盒子不会撑开父盒子,下面的元 ...
随机推荐
- FFmpeg 基本用法
FFmpeg FFmpeg 基本用法 本课要解决的问题 1.FFmpeg的转码流程是什么? 2.常见的视频格式包含哪些内容吗? 3.如何把这些内容从视频文件中抽取出来? 4.如何从一种格式转换为另一种 ...
- FFMPEG实现H264的解码(从源代码角度)
农历2014年底了,将前段时间工作中研究的FFMPEG解码H264流程在此做一下整理,也算作年终技术总结了! H264解码原理: H264的原理参考另一篇博文 http://blog.csdn.net ...
- 大数据排序算法:外部排序,bitmap算法;大数据去重算法:hash算法,bitmap算法
外部排序算法相关:主要用到归并排序,堆排序,桶排序,重点是先分成不同的块,然后从每个块中找到最小值写入磁盘,分析过程可以看看http://blog.csdn.net/jeason29/article/ ...
- bzoj 4815 小Q的表格 —— 反演+分块
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4815 思路就和这里一样:https://blog.csdn.net/leolyun/arti ...
- Windows 7下Git SSH 创建Key的步骤
1.首先你要安装Git工具 下载地址:https://git-scm.com/downloads 2.右键鼠标,选中 “Git Bash here”,当然你也可以在windows的 “开始”---&g ...
- MySQL数据库服务器参数优化mycnf,16G内存8核CPU,
业务场景: 后台支持手机在线更新系统,db服务器内存16G,8核,dell的pc服务器. qps: 200个左右 tps: 1个左右 一分钟50几个 sort_buffer_size = 32M 大了 ...
- SQL 常用语句收集
1.UPDATE 表名称 SET 列名称 = 新值 WHERE 列名称 = 某值 2.SELECT * FROM TableA INNER JOIN TableB ON TableA.name = T ...
- MongoDB分析工具之二:MongoDB分析器Profile
MongoDB优化器profile 在MySQL 中,慢查询日志是经常作为我们优化数据库的依据,那在MongoDB 中是否有类似的功能呢?答案是肯定的,那就是MongoDB Database Prof ...
- Python知识点:distutils常用子模块
from distutils.core import setup, Extension, Commandfrom distutils.command.build import buildfrom di ...
- Skyline实现橡皮筋效果绘制矩形框
这种类似于框选的效果用的比较普遍,一般三维平台和GIS平台都提供了支持接口,可是Skyline就是这么傲娇! 思路是这样的:绘制出的矩形框应该是一直与屏幕边框平行的,也就是矩形框的实际旋转角度是等于摄 ...