HTML连载48-清除浮动的其中两种方式
一、清除浮动的方式一
给前面一个父元素设置高度，注意：企业开发中能不写高度就不写高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D131_ClearFloat</title>
<style>
.smallbox1{
width:100px;
height:100px;
background-color: red;
boder:3px solid black;
margin:5px;
float:right;
}
.smallbox2{
width:100px;
height:100px;
background-color: red;
boder:3px solid black;
margin:5px;
}
.smallbox3{
width:100px;
height:100px;
background-color: red;
boder:3px solid black;
margin:5px;
}
.smallbox4{
width:100px;
height:100px;
background-color: red;
boder:3px solid black;
margin:5px;
}
.smallbox5{
width:100px;
height:100px;
background-color: red;
boder:3px solid black;
margin:5px;
}
.smallbox6{
width:100px;
height:100px;
background-color: red;
boder:3px solid black;
margin:5px;
}
.bigbox1,.bigbox2{
/*width:400px;*/
/*width:400px;*/
background-color: green;
border:3px black solid;
}
</style>
</head>
<body>
<div class="bigbox1">
<div class="smallbox1"></div>
<div class="smallbox2"></div>
<div class="smallbox3"></div>
</div>
<div class="bigbox2">
<div class="smallbox4"></div>
<div class="smallbox5"></div>
<div class="smallbox6"></div>
</div>
</body>
</html>
二、清除浮动的第二种方式
给后面的属性添加clear属性
clear属性取值：
none：默认取值，按照浮动元素的排序规则进行排序（左浮动找左浮动，右浮动找右浮动）
left：不要找前面的左浮动元素
right：不要找前面的右浮动元素
both：不要找前面的左浮动和有浮动元素
例如：我们不设置大盒子的宽高，小盒子会把大盒子撑起来，但是两个大盒子会因此而在一行上
.smallbox1{
width:100px;
height: 100px;
float:left;
background-color: red;
border:2px solid black;
}
.smallbox2{
width:100px;
height: 100px;
float:left;
background-color: red;
border:2px solid black;
}
.smallbox3{
width:100px;
height: 100px;
float:left;
background-color:blue;
border:2px solid black;
}
.smallbox4{
width:100px;
height: 100px;
float:left;
background-color: blue;
border:2px solid black;
}
</style>
</head>
<body>
<div class="bigbox1">
<div class="smallbox1"></div>
<div class="smallbox2"></div>
</div>
<div class="bigbox2">
<div class="smallbox3"></div>
<div class="smallbox4"></div>
</div>
</body>
我们使用clear属性在第三个小盒子上，这样就可以另起一行了（第四个就不用，因为我们就想让第三个挨着第四个），只需要第三个小盒子的代码修改代码
.smallbox3{
clear:left;
width:100px;
height: 100px;
float:left;
background-color:blue;
border:2px solid black;
}
注意点：margin属性失效了，不失效的方式我们下次再说。
三、源码：
D131_ClearFloat.html
D132_CLearAttribute.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D131_ClearFloat.html
https://github.com/ruigege66/HTML_learning/blob/master/D132_CLearAttribute.html
2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包
HTML连载48-清除浮动的其中两种方式的更多相关文章
- HTML连载49-清除浮动的第三种方式（内外墙法）
一.清除浮动的第三种方式 1.隔墙法有两种如下:外墙法和内墙法. 2.外墙法 (1)在两个盒子中间添加一个额外的块级元素 (2)给这个额外添加的块级元素设置:clear:both;属性 注意点: ...
- css清除浮动的两种方式（clearfix和clear）
最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都 ...
- 【转】css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...
- css清除浮动float的几种方法
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度, ...
- 《连载 | 物联网框架ServerSuperIO教程》- 10.持续传输大块数据流的两种方式（如：文件）
1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...
- yum和编译两种方式升级or降级Centos内核
http://blog.51cto.com/renzhiyuan/1882599 今天探讨用yum和编译两种方式升级或者降级内核版本: 升级:比如玩kvm,docker等虚拟化,centos内核则升级 ...
- 不停止MySQL服务增加从库的两种方式
不停止MySQL服务增加从库的两种方式 转载自:http://lizhenliang.blog.51cto.com/7876557/1669829 现在生产环境MySQL数据库是一主一从,由于业务量访 ...
- jquery ajax提交表单数据的两种方式
http://www.kwstu.com/ArticleView/kwstu_201331316441313 貌似AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职 ...
- JSP连接数据库的两种方式：Jdbc-Odbc桥和Jdbc直连（转）
学JSP的同学都要知道怎么连数据库,网上的示例各有各的做法,弄得都不知道用谁的好.其实方法千变万化,本质上就两种:Jdbc-Odbc桥和Jdbc直连. 下面先以MySQL为例说说这两种方式各是怎么连的 ...
随机推荐
- SpringCloud之Ribbon：负载均衡
Spring Cloud集成了Ribbon,结合Eureka,可实现客户端的负载均衡. 下面实现一个例子,结构下图所示. 一.服务器端 1.创建项目 开发工具:IntelliJ IDEA 2019.2 ...
- nginx 校验及重启
#查询nginx所在路径 [centos find 查询文件](https://www.cnblogs.com/codeWorldCodeHeart/p/12049262.html) #校验如下 /u ...
- vscode 启动
code --user-data-dir /root/vscode code --user-data-dir /root/vscode
- ajax配置项中的type与method
1. jQuery中ajax配置项中的使用type与method的区别本质上两个配置项是没有区别的,区别在于两者出现的时间不同,type对于目前jQuery的版本全部兼容,也就是说$.ajax({ t ...
- jvaa之初始化块
1.初始化块的作用:对java对象进行初始化: 2.程序的执行顺序:声明成员变量的默认值-->显示初始化,多个初始化块依次被执行(同级别下按先后顺序执行)-->构造器在对成员进行赋值操作. ...
- Java 正则表达式_网络爬虫
首先 需要了解 一些 关于 网络爬虫的 基本知识: 网络爬虫: 所谓的 爬虫 就是一个 应用 程序, 这个 应用 程序 会 获取 网络中的 指定信息(网页 数据). 例如百度: 启动 这个 爬虫 程序 ...
- tensorflow中卷积、转置卷积具体实现方式
卷积和转置卷积,都涉及到padding, 那么添加padding 的具体方式,就会影响到计算结果,所以搞清除tensorflow中卷积和转置卷积的具体实现有助于模型的灵活部署应用. 一.卷积 举例说明 ...
- 深蓝词库转换2.6版发布——支持Emoji、颜文字和小鹤双拼
端午期间,别人在度假,我在家码代码,把深蓝词库转换做了一下版本升级.本次更新主要是2大特性: 1.支持Emoji和颜文字 在源词库中可以选择Emoji. Emoji文件的格式为: Emoji+< ...
- Python 词云可视化
最近看到不少公众号都有一些词云图,于是想学习一下使用Python生成可视化的词云,上B站搜索教程的时候,发现了一位UP讲的很不错,UP也给出了GitHub上的源码,是一个很不错的教程,这篇博客主要就是 ...
- 《ServerSuperIO Designer IDE使用教程》- 7.增加机器学习算法，通讯采集数据与算法相结合。发布：4.2.5 版本
v4.2.5更新内容:1.修复服务实例设置ClearSocketSession参数时,可能出现资源无法释放而造成异常的情况.2.修复关闭宿主程序后进程仍然无法退出的问题.2.增加机器学习框架.3.优化 ...