一、清除浮动的方式一

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


<!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. stdc++.6.0.9动态库缺失

    问题 ld: library not found for -lstdc++.6.0.9 clang: error: linker command failed with exit code 1 (us ...

  2. JDK环境变量配置遇见的错误以及解决办法

    cmd中输入java -version错误信息: An error has occurred while processing the shared archive file.Unable to un ...

  3. Ali 访问控制 RAM 用户身份

    Ali 访问控制 RAM 用户身份 2018/11/13 Chenxin 参考: https://help.aliyun.com/product/28625.html?spm=a2c4g.111866 ...

  4. centos7.6 jumpserver 堡垒机 重启启动顺序

    cd /sdata/usr/local python3. -m venv py3 source /sdata/usr/local/py3/bin/activate cd /sdata/usr/loca ...

  5. Linux系统iptables与firewalld防火墙

    iptables iptables服务用于处理或过滤流量的策略条目(规则),多条规则可以组成一个规则链,而规则链则依据数据包处理位置的不同进行分类. 在进行路由选择前处理数据包(PREROUTING) ...

  6. VS2017初学者如何打开右侧的解决方案资源管理器

  7. 2.华为路由交换技术_TCP/IP参考模型

    1.应用层 2.传输层(主机到主机层) 3.网络层(IPV4) ARP协议:地址解析协议 原理:源终端A想要发送信息给目的终端B,已知B的IP地址,需要获取B的MAC地址.首先它会在局域网广播,一般情 ...

  8. [读论文]Shading-aware multi view stereo

    如何实现refine的? 几何误差和阴影误差如何加到一起? 为了解决什么问题? 弱纹理或无纹理:单纯的多视图立体算法在物体表面弱纹理或者无纹理区域重建完整度不够高,精度也不够高,因此结合阴影恢复形状来 ...

  9. Redis令牌桶限流

    一 .场景描述 在开发接口服务器的过程中,为了防止客户端对于接口的滥用,保护服务器的资源, 通常来说我们会对于服务器上的各种接口进行调用次数的限制.比如对于某个 用户,他在一个时间段(interval ...

  10. python语言程序设计基础(第二版)第五章答案随笔

    1.实现isOdd()函数,参数为整数,如果整数是奇数,返回True,否则返回False def isOdd(num):    if num % 2 == 0:        return True  ...