一、清除浮动的方式一

给前面一个父元素设置高度，​注意：企业开发中能不写高度就不写高度


<!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-清除浮动的其中两种方式的更多相关文章

  1. HTML连载49-清除浮动的第三种方式（内外墙法）

    一.清除浮动的第三种方式 1.隔墙法有两种​如下:外墙法和内墙法​.​ 2.外墙法 (1)在两个盒子中间添加一个额外的块级元素 (2)给这个额外添加的块级元素设置:clear:both;属性 注意点: ...

  2. css清除浮动的两种方式（clearfix和clear）

    最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都 ...

  3. 【转】css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...

  4. css清除浮动float的几种方法

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度, ...

  5. 《连载 | 物联网框架ServerSuperIO教程》- 10.持续传输大块数据流的两种方式（如：文件）

    1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...

  6. yum和编译两种方式升级or降级Centos内核

    http://blog.51cto.com/renzhiyuan/1882599 今天探讨用yum和编译两种方式升级或者降级内核版本: 升级:比如玩kvm,docker等虚拟化,centos内核则升级 ...

  7. 不停止MySQL服务增加从库的两种方式

    不停止MySQL服务增加从库的两种方式 转载自:http://lizhenliang.blog.51cto.com/7876557/1669829 现在生产环境MySQL数据库是一主一从,由于业务量访 ...

  8. jquery ajax提交表单数据的两种方式

    http://www.kwstu.com/ArticleView/kwstu_201331316441313 貌似AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职 ...

  9. JSP连接数据库的两种方式：Jdbc-Odbc桥和Jdbc直连（转）

    学JSP的同学都要知道怎么连数据库,网上的示例各有各的做法,弄得都不知道用谁的好.其实方法千变万化,本质上就两种:Jdbc-Odbc桥和Jdbc直连. 下面先以MySQL为例说说这两种方式各是怎么连的 ...

随机推荐

  1. AndroidStudio配置好了so文件运行却报错 java.lang.UnsatisfiedLinkError:

    报错截图: 解决方法:在app的build.gradle 下的defaultConfig里面添加过滤即可: ndk { abiFilters 'armeabi' //兼容x86cpu架构 需要什么样的 ...

  2. s3c2440裸机-内存控制器(五、SDRAM编程实现)

    配置内存控制器-SDRAM编程配置 2440内存控制器共有13个寄存器. BANK0--BANK5只需要设置BWSCON和BANKCONx(x为0-5)两个寄存器: BANK6.BANK7外接SDRA ...

  3. 简单搭建docker registry

    已知信息: 服务端IP:192.168.7.2xx 客户端IP:192.168.7.1xx 服务端: docker registry中镜像本地映射地址:/Users/dockergit/private ...

  4. A:linux基础章节导航

    本章的内容主要有: 模板机的安装 常用的小命令 find awk vim sed

  5. C# 使用NAudio合并mp3、wav音频文件

    1.什么是wav格式    WAV为微软公司(Microsoft)开发的一种声音文件格式,它符合RIFF(Resource Interchange File Format)文件规范,用于保存Windo ...

  6. vs 2019 自带 反编译 与 Reflector 反编译工具比较

    都是一样的 但是要看自己写的 反编译代码 还是得去  Reflector

  7. oracle相邻表记录交换（单双两两交换）

    在博客园的博问中看到了一个这样的提问:一个表中有id和name两个字段,id是连续非空不重复的,想要交换相邻表记录的name值(单双两两交换). 另外,如果最后的单独行没有对应的下一行匹配记录的话,就 ...

  8. Concepts & Implementation of PLs

    http://perugini.cps.udayton.edu/teaching/courses/Spring2015/cps352/index.html#lecturenotes Programmi ...

  9. 执行超大的.sql文件处理，100M++

    sqlcmd的命令参数如下: 1    [-U 登录 ID]             [-P 密码] 2  [-S 服务器]                [-H 主机名]           [-E ...

  10. 【JS基础语法】---学习roadmap---6 parts

    JS基础语法---roadmap Part 1 - 2: Part 3 - 4:   Part 5 - 6