浮动的清除 -- 四种方法
From: https://www.cnblogs.com/gchlcc/p/5824200.html
前言 -- 一个父亲不能被自己浮动的儿子,撑出高度。
开胃小菜
- 来看一个实验:现在有两个div,div身上没有任何属性。每个div中都有li,这些li都是浮动的。
我们本以为这些li,会分为两排,但是,第二组中的第1个li,去贴靠第一组中的最后一个li了。
第二个div中的li,去贴第一个div中最后一个li的边了。
原因就是因为div没有高度,不能给自己浮动的孩子们,一个容器。
清除浮动方法1:给浮动的元素的祖先元素加上高度
- 如果一个元素要浮动,那么它的祖先元素一定要有高度.
高度的盒子,才能关住浮动
只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元素.所以就是清除浮动带来的影响了.
清除浮动的方法2:clear:both;
- 网页制作中,高度height很少出现.为什么?因为能被内容撑高!那么也就是说,刚才我们讲解的方法1,工作中用的极少.
- clear:both; clear就是清除,both指的是左浮动,右浮动都要清除.意思就是:清除别人对我的影响.
这个方法有一个非常大的,并且致命的问题,margin失效了!
清除浮动方法3:隔墙法与内墙法
- 隔墙法 该方法通过div.cl h16这堵墙将两个父类分隔,弥补了clear:both方法中margin无效的情况,可以通过设置墙的高度来控制间隙
弊端:网页渲染后,两个分隔的父类不会有高度
- 内墙法 顾名思义,将墙修在了父类里面
清除浮动方法4:overflow:hidden;
- overflow:hidden;的本意是将超出父类的部分隐藏
一个父亲不能被自己浮动的儿子,撑出高度。但是,只要给父亲加上overflow:hidden; 那么,父亲就能被儿子撑出高了。这是一个偏方
清除浮动的最后总结
- 1) 加高法:
浮动的元素,只能被有高度的盒子关住。 也就是说,如果盒子内部有浮动,这个盒子有高,那么妥妥的,浮动不会互相影响。但是,工作上,我们绝对不会给所有的盒子加高度,这是因为麻烦,并且不能适应页面的快速变化。
1 <div> → 设置height
2 <p></p>
3 <p></p>
4 <p></p>
5 </div>
6
7 <div> → 设置height
8 <p></p>
9 <p></p>
10 <p></p>
11 </div>
- 2) clear:both;法
最简单的清除浮动的方法,就是给盒子增加clear:both;表示自己的内部元素,不受其他盒子的影响。
1 <div>
2 <p></p>
3 <p></p>
4 <p></p>
5 </div>
6
7 <div> → clear:both;
8 <p></p>
9 <p></p>
10 <p></p>
11 </div>
浮动确实被清除了,不会互相影响了。但是有一个问题,就是margin失效。两个div之间,没有任何的间隙了。
- 3)隔墙法:
在两部分浮动元素中间,建一个墙。隔开两部分浮动,让后面的浮动元素,不去追前面的浮动元素。
墙用自己的身体当做了间隙。
1 <div>
2 <p></p>
3 <p></p>
4 <p></p>
5 </div>
6
7 <div class="cl h10"></div>
8
9 <div>
10 <p></p>
11 <p></p>
12 <p></p>
13 </div>
我们发现,隔墙法好用,但是第一个div,还是没有高度。如果我们现在想让第一个div,自动的根据自己的儿子,撑出高度,我们就要想一些“小伎俩”,“奇淫技巧”。
- 内墙法:
1 <div>
2 <p></p>
3 <p></p>
4 <p></p>
5 <div class="cl h10"></div>
6 </div>
7
8 <div>
9 <p></p>
10 <p></p>
11 <p></p>
12 </div>
内墙法的优点就是,不仅仅能够让后部分的p不去追前部分的p了,并且能把第一个div撑出高度。这样,这个div的背景、边框就能够根据p的高度来撑开了。
- 4)overflow:hidden;
这个属性的本意,就是将所有溢出盒子的内容,隐藏掉。但是,我们发现这个东西能够用于浮动的清除。
我们知道,一个父亲,不能被自己浮动的儿子撑出高度,但是,如果这个父亲加上了overflow:hidden;那么这个父亲就能够被浮动的儿子撑出高度了。这个现象,不能解释,就是浏览器的小偏方。
并且,overflow:hidden;能够让margin生效。
浮动的清除 -- 四种方法相关推荐
- [Web 前端] 018 css 清除浮动的四种方法
清除浮动的四种方法 加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...
- CSS清除浮动的四种方法
CSS清除浮动的四种方法 第一种:使用div空标签法 第二种:父元素使用overflow: hidden 第三种:伪元素选择器:after 第四种:伪元素选择器:before + after 第一种: ...
- 清除浮动最常用的四种方法
1.为什么要清除浮动 开发过程中,浮动是需要掌握的一个技能,页面布局当中,在无法确定子元素的高度(height)时,我们无法给父级标签一个固定的高度(height),我们想要的是,由子元素的高度去控制 ...
- 彻底删除的文件如何恢复?误删数据恢复,四种方法就可以解决
电脑磁盘中存储了许多文件,我们不可避免地会误删一些文件,但是我们中的许多人不知道在文件被错误删除后如何恢复它们.事实上,误删数据恢复没有想象中那么难,我们自己也可以操作完成.到底是什么方法?接下来我们 ...
- linux如何解除密码锁屏图案大全,手机锁屏图案(锁屏密码)忘记了怎么办?四种方法帮你轻松搞定...
很多朋友可能为了追求新奇,对手机的各种功能都比较好奇,都想试一试.对于图案解锁这个功能也可能比较喜欢,但会不会就是刚刚设置完了就忘记了呢?那么手机锁屏图案(锁屏密码)忘记了怎么办?本文将为大家介绍四种 ...
- python 多重列表去重_Python对列表去重的多种方法(四种方法)
Python对列表去重的多种方法(四种方法) 无聊统计了下列表去重到底有多少种方法.下面小编给大家总结一下,具体内容详情如下: 开发中对数组.列表去重是非常常见的需求,对一个list中的id进行去重, ...
- 前端面试题:使用css生成田字格的四种方法
使用css生成田字格的四种方法 html结构 css基础样式 第一种 flex布局 第二种 绝对定位 第三种 css瀑布流 第四种 float浮动 html结构 <div class=" ...
- 双飞翼 html 布局,css实现双飞翼布局的四种方法(附代码)
本篇文章给大家带来的内容是关于css实现双飞翼布局的四种方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 圣杯布局.双飞翼布局效果图 从效果图来看圣杯布局.双飞翼布局效果 ...
- 宝塔面板屏蔽、去除、解决强制绑定手机账号的四种方法
教程文档 从7.4.5版本开始,宝塔安装后首页强制绑定手机号码,虽然没有关闭按钮,但其实只是一个弹窗,并且只在首页提示(不排除之后官方改成其他页面也弹窗),不想绑定的用户可以直接修改面板首页文件即可关 ...
最新文章
- Linux改变输出字体颜色,linux下 C编程改变输出字体颜色
- 关于学习Python的一点学习总结(36->基本序列和映射协议)
- java正则测试_Java的正则表达式
- 快排堆排归排三种排序的比较
- Android fragment源码全解析
- 一文讲懂什么是三层交换机、网关、DNS、子网掩码、MAC地址
- VSCode 初次写vue项目并一键生成.vue模版
- Qt QInputDialog文本输入对话框示例
- 13 MM配置-主数据-定义物料状态
- python 常用包_七月在线—Python和数据分析Lesson 1
- 微信小程序--搜索关键词高亮
- win10, tensorflow遇到 ImportError: Could not find “cudart64_90dll” 错误解决
- html引入html include_PostgreSQL引入插件EXTENSION的常用方法
- shell逻辑判断和-a区别
- docker 查看镜像版本_Docker 安装及入门介绍 - 荏苒经十载
- linux 集成 3g 模块 串口 option,华为等 3G、4G模块拨号上网过程分析
- 云端虚拟化技术的应用
- ecshop多国货币汇率换算,多国货币切换,多国货币价格转换
- 苹果开发者账号注册第一步,Apple ID 的双重认证,为 Apple ID 设置双重认证
- 阿里云免费ssl证书(PFX格式证书)安装
热门文章
- jQuery 入门教程(5): 显示/隐藏内容
- Xen的起源与工作原理
- Android API 中文(77)——AdapterView.OnItemSelectedListener
- 案例精解企业级网络构建
- 文件的删除和文件信息的读取
- 用户体验可视化指南pdf_R中增强可视化的初学者指南
- 划痕实验 迁移面积自动统计_从Jupyter迁移到合作实验室
- linux事务隔离级别,事务的隔离级别(Transaction isolation levels)2
- leetcode 73. 矩阵置零
- rest api 示例2_REST API教程– REST Client,REST Service和API调用通过代码示例进行了解释