(前端)html与css css 18、清除浮动,溢出隐藏
清除浮动
1、浮动存在的问题
a) 浮动的元素不能撑高父级,代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 500px;border: 10px solid #999;}.box div{float: left;width: 100px;height: 100px;background: gold;margin-right: 10px;}</style></head> <body><div class="box"><div></div><div></div><div></div><div></div></div> </body> </html>
View Code
效果图↓
元素脱离标准流之后,不能再撑高他的父级盒子。
b) 浮动会影响后面浮动的元素,代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 700px;border: 10px solid #999;}.box div{float: left;width: 100px;height: 100px;background: gold;margin-right: 10px;}</style></head> <body><div class="box"><div></div><div></div><div></div><div></div></div><div class="box"><div></div><div></div><div></div><div></div></div> </body> </html>
View Code
我又加了一个box,正常想到的效果图↓
实际效果图↓
如果后面的元素浮动方向相同,他会去贴上一个浮动最后一个 元素的边。
2、清除浮动方法
a) 给父盒子添加高度
给父级元素增加高度,它内部的浮动元素被限制了范围,不会影响后面的元素浮动,代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 700px;height: 150px;border: 10px solid #999;}.box div{float: left;width: 100px;height: 100px;background: gold;margin-right: 10px;}</style></head> <body><div class="box"><div></div><div></div><div></div><div></div></div><div class="box"><div></div><div></div><div></div><div></div></div> </body> </html>
View Code
效果图↓
效果:解决了父级高度的问题,解决了浮动影响后面浮动的问题。
存在的问题:高度还是不能自适应。
b) 清除浮动属性clear
元素都可以设置一个clear的属性,用来清除浮动的作用。
属性值:left、right、both(两边)
作用:clear整体表示清除自身受到的其他元素带来的浮动的影响。
left:清除受到左浮动的影响。
right:清除受到右浮动的影响。
both:清除受到左右两个方向浮动的影响。
代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}.box,.box1{width: 700px; border: 10px solid #999;}.box1{clear: left;}.box div,.box1 div{float: left;width: 100px;height: 100px;background: gold;margin-right: 10px;}</style> </head> <body><div class="box"><div></div><div></div><div></div><div></div></div><div class="box1"><div></div><div></div><div></div><div></div></div> </body> </html>
View Code
效果图↓
解决:浮动的互相影响。
存在的问题:父盒子还是不能被子盒子撑高,margin如果小于中间浮动的子元素的高度,margin显示效果失效,代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}.box,.box1{width: 700px; border: 10px solid #999;/*这里设置了一个margin的属性 20px*/margin-bottom: 20px;}.box1{clear: left;}.box div,.box1 div{float: left;width: 100px;height: 100px;background: gold;margin-right: 10px;}</style> </head> <body><div class="box"><div></div><div></div><div></div><div></div></div><div class="box1"><div></div><div></div><div></div><div></div></div> </body> </html>
View Code
效果图及控制台图解↓
发现并没有变化。
c) 隔墙法
隔墙法:在互相影响的元素中间加一道墙,阻隔开两边的元素,墙上面加一个clear属性。
外墙法:
在有浮动元素的父盒子之间隔一道墙,添加两个类,一个清除浮动,一个模拟外边距,代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}.box,.box1{width: 700px; border: 10px solid #999;margin-bottom: 20px;}.box div,.box1 div{float: left;width: 100px;height: 100px;background: gold;margin-right: 10px;}.cl{clear: both;}.he{height: 20px;}</style> </head> <body><div class="box"><div></div><div></div><div></div><div></div></div><div class="cl he"></div><div class="box1"><div></div><div></div><div></div><div></div></div> </body> </html>
View Code
解释:在class名为box和box1的盒子之前在加一个名为cl 和he 的盒子,就将cl这个盒子看成一道墙,然后单独给这道墙单独设置clear属性和height属性,在这里的height是模拟间距的效果,效果图↓
解决:浮动的互相影响。
存在的问题:高度自适应,margin失效。
内墙法:
将清除浮动的墙放在有浮动元素的父盒子内部的最后,只要有浮动就在盒子内部加一道墙,代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}.box,.box1{width: 700px; border: 10px solid #999;margin-bottom: 20px;}.box .fl,.box1 .fl{float: left;width: 100px;height: 100px;background: gold;margin-right: 10px;}.cl{clear: both;}</style> </head> <body><div class="box"><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="cl"></div></div><div class="box1"><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="cl"></div></div> </body> </html>
View Code
解释:在父盒子内部的最后添加了名为cl的盒子,然后cl单独设置clear属性。
效果图↓
解决:浮动互相影响,高度自适应,margin失效。
缺点:①html结构布局,很多需要浮动,每个浮动的盒子内都需要隔一堵墙,页面结构复杂,会出现很多没有意义的标签。
②一个盒子内的元素要浮动就都浮动,浮动后面的墙是一个标准流里的元素。
三、overflow: hidden
盒子内部的元素可以设置溢出模式,隐藏,自动显示。
overflow:溢出。
属性值:hidden溢出隐藏,auto溢出滚动。
溢出隐藏(多出的内容隐藏):代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 300px;height: 400px;padding: 5px;margin: 100px auto;border: 1px solid red;font-size: 14px;font-family: "微软雅黑";line-height: 26px;}</style> </head> <body><div class="box"><p>2013年2月,在江苏卫视春晚与师父赵本山合作小品《有钱了》,在辽宁卫视春晚与王小利合作小品《第一场雪》,在吉林卫视春晚与张可 、小超越合作小品《大考当前》。同年3月,主演农村家庭剧《收获的季节》,在剧中饰演金翰林。同年9月,参演民国传奇剧《老兵》。同年9月,与沈春阳共同主演张学松执导的都市情感剧《男人四十要出嫁》,在剧中饰演周六福,同年10月7日,参加第十届华鼎奖,获最受中国媒体欢迎的演员 同年12月,参演阚卫平执导的当代乡村情感喜剧《爹妈满院》,在剧中饰演张万泉。2017年,在辽宁卫视春晚推出《吃面》的续集《烤串》。同年2月,在北京卫视春晚小品《回家》中,他延续了几次春晚里恒久不变的红帽子、老头装“损色”造型。同年2月,在东方卫视春晚与柳岩合作小品《爱情不外卖》。同年4月,参加星素喜剧挑战竞技秀节目《笑声传奇》。11月30日晚,自爆由他执导的喜剧电影《发财日记》目前已进入筹备阶段。10月,担任浙江卫视原创喜剧竞演综艺节目《喜剧总动员第二季》常驻队长</p></div> </body> </html>
View Code
效果图↓
可以看到黄圈里的文字溢了出来,需要加个溢出隐藏属性,代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 300px;height: 400px;padding: 5px;margin: 100px auto;border: 1px solid red;font-size: 14px;font-family: "微软雅黑";line-height: 26px;/*溢出隐藏*/overflow: hidden;}</style> </head> <body><div class="box"><p>2013年2月,在江苏卫视春晚与师父赵本山合作小品《有钱了》,在辽宁卫视春晚与王小利合作小品《第一场雪》,在吉林卫视春晚与张可 、小超越合作小品《大考当前》。同年3月,主演农村家庭剧《收获的季节》,在剧中饰演金翰林。同年9月,参演民国传奇剧《老兵》。同年9月,与沈春阳共同主演张学松执导的都市情感剧《男人四十要出嫁》,在剧中饰演周六福,同年10月7日,参加第十届华鼎奖,获最受中国媒体欢迎的演员 同年12月,参演阚卫平执导的当代乡村情感喜剧《爹妈满院》,在剧中饰演张万泉。2017年,在辽宁卫视春晚推出《吃面》的续集《烤串》。同年2月,在北京卫视春晚小品《回家》中,他延续了几次春晚里恒久不变的红帽子、老头装“损色”造型。同年2月,在东方卫视春晚与柳岩合作小品《爱情不外卖》。同年4月,参加星素喜剧挑战竞技秀节目《笑声传奇》。11月30日晚,自爆由他执导的喜剧电影《发财日记》目前已进入筹备阶段。10月,担任浙江卫视原创喜剧竞演综艺节目《喜剧总动员第二季》常驻队长</p></div> </body> </html>
View Code
效果图↓
溢出滚动(多出的内容出现滚动条): 代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 300px;height: 400px;padding: 5px;margin: 100px auto;border: 1px solid red;font-size: 14px;font-family: "微软雅黑";line-height: 26px;/*溢出滚动*/overflow: auto;}</style> </head> <body><div class="box"><p>2013年2月,在江苏卫视春晚与师父赵本山合作小品《有钱了》,在辽宁卫视春晚与王小利合作小品《第一场雪》,在吉林卫视春晚与张可 、小超越合作小品《大考当前》。同年3月,主演农村家庭剧《收获的季节》,在剧中饰演金翰林。同年9月,参演民国传奇剧《老兵》。同年9月,与沈春阳共同主演张学松执导的都市情感剧《男人四十要出嫁》,在剧中饰演周六福,同年10月7日,参加第十届华鼎奖,获最受中国媒体欢迎的演员 同年12月,参演阚卫平执导的当代乡村情感喜剧《爹妈满院》,在剧中饰演张万泉。2017年,在辽宁卫视春晚推出《吃面》的续集《烤串》。同年2月,在北京卫视春晚小品《回家》中,他延续了几次春晚里恒久不变的红帽子、老头装“损色”造型。同年2月,在东方卫视春晚与柳岩合作小品《爱情不外卖》。同年4月,参加星素喜剧挑战竞技秀节目《笑声传奇》。11月30日晚,自爆由他执导的喜剧电影《发财日记》目前已进入筹备阶段。10月,担任浙江卫视原创喜剧竞演综艺节目《喜剧总动员第二季》常驻队长</p></div> </body> </html>
View Code
效果图↓
可以看出来有个滚动条的效果。
overflow其他功能:能清除盒子内部元素的浮动影响
未添加overflow:hidden代码及效果图↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}.box,.box1{width: 700px; border: 10px solid #999;margin-bottom: 20px;}.box .fl,.box1 .fl{float: left;width: 100px;height: 100px;background: gold;margin-right: 10px;}</style> </head> <body><div class="box"><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div></div><div class="box1"><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div></div> </body> </html>
View Code
添加后代码及效果图↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}.box,.box1{width: 700px; border: 10px solid #999;margin-bottom: 20px;overflow: hidden;}.box .fl,.box1 .fl{float: left;width: 100px;height: 100px;background: gold;margin-right: 10px;}</style> </head> <body><div class="box"><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div></div><div class="box1"><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div></div> </body> </html>
View Code
解决:浮动互相影响,高度自适应,margin失效。
优势:能够解决所有问题,不会增加无用的标签。
overflow:hidden加载机制:
高度自适应:如果元素有溢出隐藏的属性,网页加载时,会强制的去元素内部搜索,识别所有内部元素高度,会把最高元素的高度配给父盒子自适应高度。
浮动影响:加载时,如果有溢出隐藏,强制检索,看盒子内部是否有浮动元素,如果有会被整体管理起来,在自身的高度内不会影响其他的浮动元素。
如果遇到大的结构,会在结构之间加一堵外墙。
转载于:https://www.cnblogs.com/StevenSunYiwen/p/11254390.html
(前端)html与css css 18、清除浮动,溢出隐藏相关推荐
- CSS基础之清除浮动
CSS基础之清除浮动 本人前端菜鸟一枚,在学习 CSS 过程中发现网上流传的教程参差不齐,要么内容不够详细,要么方法就是错的.本文是在我参考了许多前辈经验的基础上编写的,如有错误的地方,请各位大牛不吝 ...
- css为何要清除浮动及清除浮动的方法
一:css为何要清除浮动 1.很多情况下,如果我们使用了float特效,出现margin,padding设置不能正确显示,浮动会导致父级子级之间设置了padding,导致了属性不能正常传达,导致mar ...
- CSS中clear“清除浮动”的作用原理
CSS中clear"清除浮动"的作用原理 之前看视频中,总听到说clear不是清除浮动,而是消除浮动带来的影响,纠结了一天,没有理解,现在终于能明白这是什么意思了. 下面直接用代码 ...
- 一篇文章带你了解CSS clear both清除浮动
一.前言 CSS clear both清除产生浮动 ,使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,就用clear样式属性即可实现. 二.clear语法与结构 1. cle ...
- 博学谷html css,博学谷 - CSS笔记12 - 清除浮动
1.为什么需要清除浮动 由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为 0 时,就会影响下面的标准流盒子. 由于浮动元素不再占用原文档流的位置,所以它会对后面的元 ...
- 在html中清除浮动的代码,css 两种清除浮动经典实例代码
一.使用空标签清除浮动 *{margin:0;padding:0;} body{font:36px bold; color:#f00; text-align:center;} #layout{back ...
- html clear属性值,CSS clear both清除浮动
DIV+CSS clear both清除产生浮动 我们知道有时使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,我们就用clear样式属性即可实现. 接下来我们来认识与学习cs ...
- CSS中关于清除浮动的问题
1.采用:after的方法清除浮动 优点:避免在html里插入多余的标签 详情:http://www.positioniseverything.net/easyclearing.html 整理成一个通 ...
- 前端学习(310):清除浮动的方法
我们经常把高度塌陷问题也叫做常见的几种清除浮动的方法 高度塌陷问题-父元素高度自适应,子元素float后,造成父元素高度为0,就叫做高度塌陷问题 给父元素一个高度 缺点:无法高度自适应 父元素{o ...
- html 浮动溢出,浮动+溢出隐藏滚动条
浮动(float) float-right(left+top+bottom) 分别是右浮动左浮动上浮动和下浮动, 浮动会在某些时候带来一定影响,所以需要 清除浮动:clear:none(默认值) - ...
最新文章
- 强化学习(八) - 深度Q学习(Deep Q-learning, DQL,DQN)原理及相关实例
- CM005-逆向分析过程(上篇)
- android native.js,Android Native与JS通信互调
- 软件设计师 - 软件工程
- 【读书笔记】非暴力沟通
- 操作 mysql 不生成日志_利用Python操作MySQL数据库,以后不懂这些是要被鄙视的!...
- java源码阅读Object
- 基于matlab的2ask频带传输系统仿真与性能分析,基于MATLAB的2ASK频带传输系统仿真与性能分析汇总...
- shell 脚本创建虚拟机 并配置网卡ip地址(两个脚本)
- ai人工智能可以干什么_人工智能可以解决我的业务问题吗?
- Win10系统设置为英文
- 基于vivoY97的Adb驱动程序的安装
- RabbitMQ快速入门(详细)
- clang diagnostic
- JAVA - 变量作用域
- 劳伦杰克逊写给姚明的情书:你的名字
- 3.博客系统| 设计系统首页(文章列表渲染)
- 右键拖动调出BandZip的快捷菜单
- 联想服务器的系统安装教程视频教程,联想服务器装linux系统怎么安装教程
- .native的使用
热门文章
- 【入门】算法初步1 排序
- Ubuntu系统无法使用vim命令
- mysql存储过程之循环(WHILE,REPEAT和LOOP)
- matlab simulink 汽车abs模糊pid控制和pid控制对比
- C++学习路线必读4本书
- [图像]中值滤波(Matlab实现)
- (Java) 实现打印菱形图案
- Android登录客户端,验证码的获取,网页数据抓取与解析,HttpWatch基本使用
- 都说在阿里年薪百万不难,面试入职阿里需要准备什么?
- 【OpenCV】cv2.putText()函数用法