html中加入清除浮动,HTML中清除浮动的几种办法
为什么会有浮动
在一张HTML里,元素的排序方式遵循文档流.即是依次排序.从上到下,从左到右依次排序.
而脱离文档流就意味着不再遵循此规则.可以通过float与positon使得元素脱离文档流,当给一个元素添加float属性时,元素就会脱离标准文档流.
例如在如图中有一个需求是:将P_tag_one与P_tag_two并列.这两个元素可能是两张并列的图片.使用float属性时最佳的选择.
浮动带来的问题
浮动会带来的问题是当子元素浮动时.不清除浮动的话就会造成后面的元素排版乱序.
如何去解决浮动问题
现在的问题就变成P_tag_one与P_tag_two浮动并列,但是又不让子元素P_tag_one与P_tag_two的浮动,而导致后续元素排版乱序
代码
没有浮动之前
*{
margin: 0px;
padding: 0px;
}
div,p{
border-radius: 5%;
border: 1px solid rgba(0, 0, 0, 0.2);
color:#394a6d;
font-weight: bolder;
font-size: 18px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
p{
width: 95px;
height: 95px;
background-color: #48FF7A;
}
.div_one{
background-color: #51dacf;
}
.div_two{
background-color: #41aaa8;
}
P_one
p_two
P_three
p_four
div_one中的两个p浮动之后的情况
设置代码:
.div_one p{
float: left;
}
如图显示的情况.div_one里的p元素浮动,脱离了标准流.div_two里的两个p元素就顶了上去.造成了元素重叠.
解决重叠方法1
通过手动设置浮动的元素的父元素的高.但是这样做有一个不好的地方,就是把元素的高度给写固定了,不利于后期的维护.不推荐这样写
.div_one{
background-color: #51dacf;
height: 200px;
}
方法2
第二种方式是通过给第二个元素设置clear属性.使用clear属性,但是父元素的高度不会显示(父元素成了一条线 = = )
.div_two{
width: 200px;
clear:both;
background-color: #41aaa8;
}
方法3
通过在中间添加一个元素,给添加的元素设置clear属性.但是违背了HTML负责结构,CSS负责设置样式的原则
.wall{
clear: both;
}
//设置在div1与div2之间
方法4
在设置浮动元素的最后添加一个元素,此元素书用clear属性.但是这样做会增加一个无意义的标签.不符合规范.
.wall{
clear:both;
}
P_one
p_two
P_three
p_four
方法5
与方法4类似,但是使用了伪元素.好处是没有使用HTML标签.避免增加无意义的标签.推荐使用
.div_one::after,.div_one::before{
/*设置添加的子元素的内容为空*/
content: "";
/*设置添加的子元素为块级元素*/
display: block;
/*设置添加的子元素的高度为0*/
height: 0;
/*设置添加的子元素看不见*/
visibility: hidden;
/*给添加的子元素设置clear: both;*/
clear: both;
}
.box1{
/*兼容IE6*/
*zoom:1;
}
方法6
使用overfllow:hieendn.优点就是比较简洁.但是overflow: hidden也存在别的属性功能;会有把超出的部分隐藏.
.div_one{
background-color: #51dacf;
overflow: hidden;
*zoom:1;
}
html中加入清除浮动,HTML中清除浮动的几种办法相关推荐
- 如何踢掉 sql 语句中的尾巴,我用 C# 苦思了五种办法
一:背景 1. 讲故事 这几天都在修复bug真的太忙了,期间也遇到了一个挺有趣bug,和大家分享一下,这是一块sql挺复杂的报表相关业务,不知道哪一位大佬在错综复杂的 嵌套 + 平行 if判断中sql ...
- Eclipse中移除未使用的类引用的三种办法
前言 是对源码进行修改的过程中,经常遇到修改.删除之后产生大量未使用的类应用,通过以下快捷操作可直接移除. 第一种:移除Java中未使用类 在Java类中按键[Ctrl+Shift+O] 第二种:移除 ...
- 在matlab中清除command history中的内容
在matlab中怎么清除command history中的内容? 右键单击 command history 选择最后一个.
- MySQL利用存储过程清除所有表中的所有记录
MySQL利用存储过程清除所有表中的所有记录 在使用MySQL过程中,难免会出现一些测试数据,然而这些测试数据在真正部署运行的时候,通常要被清楚掉,并且自增长的字段要回复初始值.如何高效快速的实现以上 ...
- [css] 如何清除在项目中无用的css代码呢?
[css] 如何清除在项目中无用的css代码呢? 1.IDE中,会对没有使用到的样式,自己进行检测,删除时候,还需要手动删除. 2.webpack中,有基于消除无用css的插件(purifycss-w ...
- type c pin定义_在C中定义宏以设置和清除PIN的位
type c pin定义 Given a PIN (value in HEX) and bit number, we have to SET and then CLEAR given bit of t ...
- 当最后一位不能为空格_清除工作表中的空格/非打印字符?TRIM与CALEN都无法清除时怎么办...
你好,我是小必,感谢与你在这里相遇. 今日内容:Excel工作表中打打印字符或空格. 今天有位小伙伴问了一个关于工作表单元格中的空格与非打印字符.但是常规的替换,使用TRIM函数与CALEN常规函数是 ...
- 如何清除/删除终端中的当前行?
本文翻译自:How do I clear/delete the current line in terminal? If I'm using terminal and typing in a line ...
- 如何清除计算机搜索框内的搜索历史记录,如何清除搜索框中的网站访问历史记录...
本文教你如何防止在网页浏览器地址栏中输入内容时显示匹配结果.记住,Mac 和 iPhone 平台上的 Safari 都不会保留表单数据,所以如果使用 Safari,就不需要担心这个问题.如果你想删除掉 ...
最新文章
- android团队,Android团队如何进行情感设计
- ArrayList、HashTable、List、Dictionary的演化及如何选择使用
- 网站安装打包 软件环境检测与安装[二] 下
- 使用WebService与Oracle EBS进行集成(上)
- 【three.js】库
- OpenShift 4 之Knative(1) - 创建Knative无服务器架构环境
- 【等价转换】—— min/max 的转换与互相转换
- eclipse 代码问题总结
- python treeview显示多列_Python tkinter treeview列大小
- 自然语言处理领域重要论文资源全索引
- cam全称_在ADU高级参数(parameter)中,术语CAM全称是什么?
- games101-789-shading
- msp430是什么?
- CentOS 7.6镜像下载
- 密码学和加密数字货币的简介
- 将域控服务器添加到现有域,将域控制器添加到现有 Active Directory 域时无法选择 DNS 服务器角色...
- Hive Invalid path xxxx: No files matching path file: xxxx
- 如何导入阿里巴巴字体图标
- ARM之S5pv210的USB刷机
- 【机器学习】孤立森林
热门文章
- MySQL数据库——多表查询介绍
- SDL游戏开发之四-卡马克卷轴
- 基于javaweb+SSM农产品水果店销售管理系统
- 【JavaScript】事件绑定、事件解绑、常见事件类型、事件对象
- Tcp为什么是4次挥手呢?为什么是3次握手,不能是3次挥手呢?
- 使用Python批量将PDF转换成图片
- A40i使用笔记:系统配置
- c# .net 16进制转换10进制
- 中国中试工厂市场现状研究分析与发展前景预测报告
- 西南科技大学计算机综合大纲,西南科技大学(专业学位)计算机技术研究生考试科目和考研参考书目...