一天搞定CSS: 清除浮动(float)--13
上一节已经说明了为什么要清除浮动了。这里我们就来解决浮动产生的各种问题。
为什么要清楚浮动?
地址:http://blog.csdn.net/baidu_37107022/article/details/71554283
1.清除浮动方法概览
2.clear方法
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 200px;
background: red;
}
/*1.left 元素的左边不能有浮动的元素*/
/*.div1{
float: left;
}
.div2{
clear: left;
}*/
/*2.right 元素的右边不能有浮动的元素*/
/*.div1{
float: right;
}
.div2{
clear: right;
}*/
/*3.both 元素的两都不能有浮动的元素*/
.div1{
float: left;
}
.div2{
float: right;
}
.div3{
clear: both;
}
</style>
</head>
<body>
<!--
clear 元素的某个方向上不能有浮动的元素
left 元素的左边不能有浮动的元素
right 元素的右边不能有浮动的元素
both 元素的两都不能有浮动的元素
-->
<div class="div1">kaivon1</div>
<div class="div2">kaivon2</div>
<div class="div3">kaivon3</div>
</body>
</html>
效果图
清除浮动前:div3钻到了div1下面
清除浮动后:
3.方法2–6的
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.parent{
border: 1px solid #f00;
/*2、给父级添加高度:没有从根本上解决浮动的问题*/
/*height: 100px;*/
/*3、inline-block*/
/*display: inline-block;
margin: 0 auto;*/
/*4、overflow:hidden;*/
/*overflow: hidden;*/
}
.box{
width: 100px;
height: 100px;
background: green;
float: left;
}
</style>
</head>
<body>
<!--
清除浮动的方法
1、clear
2、给父级添加高度
有的时候是不能给父级添加高度的,所以这个方法就用不了(父级没有高度的情况下)
3、inline-block
具有与上一个的清除浮动一样的总是,同时加了以后这个元素就没有办法居中了
4、overflow:hidden;
如果子级有定位的话,并且这个定位超出了父级的范围,那样的话就看不到了,所以不能加这个命令
5、空标签
空标签是没有内容,但是它的作用是用来清除浮动的,所以不符合行为、样式、结构相分离的标准
ie6下标签是有一个最小高度19px,解决后也会有2像素的偏差
6、br清除浮动
与上面的问题是一样
7、after伪类清除浮动(现在最主流的方法)
-->
<div class="parent">
<div class="box"></div>
<!--5、空标签-->
<!--<div style="clear: both;"></div>-->
<!--6、br清除浮动-->
<br clear="all" />
</div>
</body>
</html>
效果图
清除浮动前:
清除浮动后:
4.after伪类清除浮动(现在最主流的方法)
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.parent{
border: 1px solid #f00;
}
.box{
width: 100px;
height: 100px;
background: green;
float: left;
color: #fff;
}
/*
* 7、after伪类清除浮动(现在最主流的方法)
*
* .box:after{
content: '这是伪类生成的内容';
}*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<!--
清除浮动的方法
1、clear
2、给父级添加高度
有的时候是不能给父级添加高度的,所以这个方法就用不了(父级没有高度的情况下)
3、inline-block
具胡与上一个的清除浮动一样的总是,同时加了以后这个元素就没有办法居中了
4、overflow:hidden;
如果子级有定位的话,并且这个定位超出了父级的范围,那样的话就看不到了,所以不能加这个命令
5、空标签
空标签是没有内容,但是它的作用是用来清除浮动的,所以不符合行为、样式、结构相分离的标准
ie6下标签是有一个最小高度19px,解决后也会有2像素的偏差
6、br清除浮动
与上面的问题是一样
7、after伪类清除浮动(现在最主流的方法)
after 代表选择到的元素的内容的最后面
after伪类的内容默认是一个行内元素
content 设置的内容
-->
<div class="parent clearfix">
<div class="box"></div>
</div>
</body>
</html>
效果图同上(第3点)
一天搞定CSS: 清除浮动(float)--13的更多相关文章
- css清除浮动float
css清除浮动float 1.分析HTML代码 <div class="outer"> <div class="div1">1</ ...
- 【转】css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...
- css清除浮动float的几种方法
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度, ...
- css清除浮动float方法
转载:http://www.cnblogs.com/ForEvErNoME/p/3383539.html 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的 ...
- 一天搞定CSS: 浮动(float)及文档流--10
浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). ...
- 一天搞定CSS: 浮动(float)的副作用--12
我们通常使用浮动来实现某些元素的布局,但是往往这些元素浮动会影响其他元素的布局,因此会产生副作用. 如果你还不清楚什么是浮动,那就点开这个链接: http://blog.csdn.net/baidu_ ...
- CSS清除浮动float方法总结
使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...
- css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')
一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class=&quo ...
- css清除浮动float的三种方法总结
原文地址: http://my.oschina.net/leipeng/blog/221125 张大神的解析: http://www.zhangxinxu.com/wordpress/2010/01/ ...
- 前端学习笔记之css清除浮动float的七种常用方法总结和兼容性处理
在清除浮动前我们要了解两个重要的定义: 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来. 高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮 ...
随机推荐
- java多线程基本概述(二)——Thread的一些方法
在Thread类中有很多方法值得我们关注一下.下面选取几个进行范例: 1.1.isAlive()方法 java api 描述如下: public final boolean isAlive() Tes ...
- spring的MVC执行原理
spring的MVC执行原理 1.spring mvc将所有的请求都提交给DispatcherServlet,它会委托应用系统的其他模块负责对请求 进行真正的处理工作. 2.DispatcherSer ...
- Linux-配置vim开发环境
vim是一个类似于vi的著名的功能强大.高度可定制的文本编辑器,在vi的基础上改进和增加了很多特性.vim是纯粹的自由软件. 为了满足使用者的要求,将vim界面配置为自己想要的界面类型也变得流行起来. ...
- 推送一个已有的代码到新的 gerrit 服务器
1.指定项目代码库中迭代列出全部ProductList(.git)到pro.log文件中 repo forall -c 'echo $REPO_PROJECT' | tee pro.log pro.l ...
- 比较Java中几个常用集合添加元素的效率
初始化需要进行比较的集合,统一增加10万个元素,获取整个过程的执行时间. 1.List集合增加元素 private static void testList() { List<Integer&g ...
- 基于JS的问卷调查
主要工作 因为代码不好展示,也不好截长图,可以去看我的GitHub地址:https://github.com/14glwu/MyBlog/blob/master/questionnaire.html ...
- MyEclipse(8.5以上的版本) 安装js的开发插件aptana
最近在学习js,想在MyEclipse(MyEclipse 10) 上面安装一个js的开发的插件aptana. MyEclipse 8.5以后的版本的安装的方法: 1.下载aptana_update_ ...
- 【MySql】——MHA+GTID+failover+binlog-server+Atlas
一.环境准备 1.mysql-db01 #系统版本 [root@mysql-db01 ~]# cat /etc/redhat-release CentOS release 6.7 (Final) #内 ...
- 观察者模式(Observer)发布、订阅模式
观察者模式定义了对象之间一对多的依赖关系,这样一来,当一个对象改变时,他的所有依赖者都会收到通知并自动更新. 模式中的角色 1.抽象主题(Subject):它把所有观察者对象的引用保存到一个聚集里 ...
- 为程序猿正名,MM们,你们为什么要找一个程序猿男票?【原创】
前言 免责声明:这篇文章关于什么?六一儿童节马上就要到了,作为一个前端攻城师,自我感觉效率还可以,老早已把任务搞完,页面布局和前端编码高效按时交付,呵呵.趁有时间,写写文章娱乐一下.MM们,请不要拿起 ...