学习经常遇到的浮动(float)
参考自 小辉随笔:
https://www.cnblogs.com/lchsirblog/p/9582989.html
一、什么时候需要使用浮动
最常见的情景是:多个块级元素(如div)需要同一行显示。
<div class="data-float-parent">
<div class="data-float-child1"></div>
<div class="data-float-child2"></div>
</div>
如上,如要要求 child1 和 child2 同行显示,需要给这两个 div 的样式设置 float: left; ,在父元素没有高度的前提下,会导致父元素高度塌陷。
如果能确定父元素高度,给一个 height 值就可以解决。
二、清除浮动
(1)在父元素的最后加一个冗余元素并为其设置 clear:both
<div class="data-float-parent">
<div class="data-float-child1"></div>
<div class="data-float-child2"></div>
<div class="clear"></div>
</div>
.data-float-parent{
width: 200px;
/*height: 200px;*/
border: 1px solid red;
}
.data-float-child1{
width: 100px;
height: 100px;
float: left;
background-color: green;
}
.data-float-child2{
width: 100px;
height: 100px;
float: left;
background-color: orange;
}
.clear{
clear: both;
}
缺点:很明显冗余元素不符合语义化
(2)使用伪元素 :after ,添加一个类 clearfix(荐)
<div class="data-float-parent clear-float">
<div class="data-float-child1"></div>
<div class="data-float-child2"></div>
</div>
.clear-float:after{
content: "";
display: table; /*采用此方法可以有效避免浏览器兼容问题*/
clear: both;
}
这是推荐的做法,但 :after 在 IE6/IE7 不兼容
(3)父元素 BFC(IE8) 或 haslayout(IE6/IE7)
.clear-float{
overflow: hidden;
zoom:;
}
/* zoom:1; 兼容IE6 */
注:display:inline-block 也可以实现多个div并排显示,但只能是从左向右。
学习经常遇到的浮动(float)的更多相关文章
- CSS浮动(float,clear)通俗讲解
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
- 经验分享:CSS浮动(float,clear)通俗讲解
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- 【html】【6】div浮动float
我想 当看完上面的必看链接,拥有一定的基础后也得7天左右, 记住 一定要看完,知道它都有什么,没学会不要紧,哪怕只是有个简单的概念也行, 随着后续的使用慢慢深入学习,现在开始div布局. 必看参考: ...
- 经验分享:CSS浮动(float,clear)通俗讲解(转载)
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- 经验分享:CSS浮动(float,clear)通俗讲解 太棒了,清晰明了
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- 彻底理解浮动float CSS浮动详解 清除浮动的方法
我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流. 注意:标准流使我们网页布局中最稳定的一种结构 ...
- (转)经验分享:CSS浮动(float,clear)通俗讲解
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- css浮动--float/clear通俗讲解(转载)
本文为转载 (出处:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html) 教程开始: 首先要知道,div是块级元素,在页面 ...
- (转)经验分享:CSS浮动(float,clear)通俗讲解
文章转自:https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身 ...
- 【转】CSS浮动(float,clear)通俗讲解
作者:杨元 本文链接:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑, ...
随机推荐
- CPU 使用率低 but负载高
一.关于负载 什么是负载:负载就是cpu在一段时间内正在处理以及等待cpu处理的进程数之和的统计信息,也就是cpu使用队列的长度统计信息,这个数字越小越好(如果超过CPU核心*0.7就是不正常) 负载 ...
- Metinfo5.1 /member/getpassword.php SQL注入
- 【神经网络与深度学习】【Matlab开发】caffe-windows使能Matlab2015b接口
[神经网络与深度学习][Matlab开发]caffe-windows使能Matlab2015b接口 标签:[神经网络与深度学习] [Matlab开发] 主要是想全部来一次,所以使能了Matlab的接口 ...
- 【VS开发】使用 NuGet 管理项目库
NuGet 使用 NuGet 管理项目库 Phil Haack 无论多么努力,Microsoft 也没办法提供开发人员所需要的每一个库. 虽然 Microsoft 在全球的员工人数接近 90,000, ...
- 【VS开发】【智能语音处理】DTW算法(语音识别)
DTW主要是应用在孤立词识别的算法,用来识别一些特定的指令比较好用,这个算法是基于DP(动态规划)的算法基础上发展而来的.这里介绍语音识别就先介绍下语音识别的框架,首先我们要有一个比对的模版声音,然后 ...
- 深入理解java:2.3.6. 并发编程concurrent包 之管理类---线程池
我们使用线程的时候就去创建一个线程,这样实现起来非常简便,但是就会有一个问题: 如果并发的线程数量很多,并且每个线程都是执行一个时间很短的任务就结束了,这样频繁创建线程就会大大降低系统的效率,因为频繁 ...
- 模板if 的使用
from flask import Flask,render_template app = Flask(__name__) app.debug = True @app.route('/') def h ...
- linux netstat 查看端口
1. netstat命令用于显示系统的网络信息,包括网络连接 .路由表 .接口状态2. 一般我们使用 netstat 来查看本机开启了哪些端口,查看有哪些客户端连接 [root@localhost ~ ...
- shiro登陆认证
1.LoginController @RequestMapping(method = RequestMethod.POST) public String login(User user, HttpSe ...
- tomcat的相关
[针对tomcat修改,那么就直接找关于tomcat的相关文件目录进行修改即可] 1.对tomcat进行相关的操作,启动tomcat时,让其不要出现tomcat主页,与之相反的让其出现404的界面! ...