一、清除浮动的方式一

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


<!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. Oracle number类型前端界面和数据库查询不一致 number精度问题

    [发现问题] [问题分析] Ⅰ.在前端界面查询,发现了库存中存在这样的数量值.但是在数据库中查询时显示正常.即6.999999999999997 为 7. Ⅱ.至于这种小数产生,我以为是oracle存 ...

  2. OPENGL 坐标轴转换

    坐标轴 平移 旋转 缩放 重置坐标轴 矩阵操作 示例 1.坐标轴  OpenGL 使用的右手坐标系,从正面看原点,逆时针旋转被认为是正旋转. x轴:从左到右 y轴:从底部向上 z轴:从屏幕背向朝向前方 ...

  3. SpringCloud之Hystrix：集群容错框架

    分布式环境中,可能会有一些被依赖的服务会失效,影响系统的稳定运行.Hystrix通过添加延迟阈值以及容错的逻辑,以控制分布式系统间组件的交互.Hystrix通过隔离服务间的访问点.停止它们之间的级联故 ...

  4. log file sync等待超高案例浅析

    监控工具DPA发现海外一台Oracle数据库服务器DB Commit Time指标告警,超过红色告警线(40毫秒左右,黄色告警是10毫秒,红色告警线是20毫秒),如下截图所示,生成了对应的时段的AWR ...

  5. 解决Android Screen Monitor在android8.0及以上系统报错："E/Screenshot: Unsupported protocol: 2"

    1.打开命令窗口,切换到 asm.jar 所在目录,执行 java -jar asm.jar,正常情况下打开后连接上设备会显示出画面 2.但是在android8.0以上系统该asm.jar包就无法正常 ...

  6. [阅读笔记]EfficientDet

    EfficientDet 文章阅读 Google的网络结构不错,总是会考虑计算性能的问题,从mobilenet v1到mobile net v2.这篇文章主要对近来的FPN结构进行了改进,实现了一种效 ...

  7. echarts 在 vue-awesome-swiper中无法点击

    回退vue-awesome-swiper版本到2.6.7 即可npm install vue-awesome-swiper@2.6.7 --save

  8. 【洛谷5794】[THUSC2015] 解密运算（模拟）

    点此看题面 大致题意: 对于一个字符串,我们在其末尾添加一个'.',将字符串视作一个环,则可以从\(n+1\)个位置断开得到\(n+1\)个新串.现将这\(n+1\)个新串按字典序排序('.'的字典序 ...

  9. Mac-无法进入mysql，你这样做就对了

    mysql -uroot -p 输入密码之后报错:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using passwo ...

  10. easyui treegrid数据重复加载问题

    在使用easyui的时候,出现了数据重复加载的问题.如下图 关于这个问题有两种说法,第一种说法是 easyui-datagrid 类在html和js中重复定义,数据渲染时会加载两次.另一种是$(&qu ...