一、清除浮动的第三种方式

1.隔墙法有两种​如下：外墙法和内墙法​。​

2.外墙法

（1）在两个盒子中间添加一个额外的块级元素

（2）给这个额外添加的块级元素设置：clear:both;属性

注意点：外墙法可以让第二个盒子使用margin-top属性

但是不能让第一个盒子使用margin-bottom属性

解决方案：为了避免上面的问题，我们在“​墙”所在的元素设置高度就解决这个问题了。


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D134_ClearFloatThree</title>

    <style>

        .box1{

            background-color: red;

            /*border:1px white solid;*/

        }

        .box2{

            background-color: green;

            /*border:1px white solid;*/

        }

        .box1 p{

            width:100px;

            background-color: blue;

            float:left;

        }

        .box2 p{

            width:100px;

            background-color: red;

            float:left;

        }

        .wall{

            clear:both;

            height:20px;

        }

</style>

</head>

<body>

<div class="box1">

    <p>我是文字1</p>

    <p>我是文字2</p>

    <p>我是文字3</p>

</div>

<div class="wall h20"></div><!--这里还复习了一个标签可以定义多个class属性的方式，多个属性可以统一设置样式-->

<div class="box2">

    <p>我是文字4</p>

    <p>我是文字5</p>

    <p>我是文字6</p>

</div>

</body>

</html>

3.内墙法

（1）在两个盒子中间添加一个额外的块级元素

（2）给这个额外添加的块级元素设置clear:both;属性

注意点：外墙法可以让第二个盒子使用margin-top属性

也可以让第一个盒子使用margin-bottom属性

下面我们只修改上面例子的几行代码即可


        .wall{

            clear:both;

            /*height:20px;*/

        }

 .......省略代码........

<div class="box1">

    <p>我是文字1</p>

    <p>我是文字2</p>

    <p>我是文字3</p>

    <div class="wall"></div>

</div>

4.外墙法与内墙法的区别

外墙法不能撑起第一个盒子的高度，而内墙法可以撑起第一个盒子的高度​。

5.​注意点：不常用的外墙和内墙法，外墙法容易降低易读性，不知干什么的；内墙则违背了我们样式设计和内容相分离的初衷，所以仅作了解

三、源码：

D134_ClearFloatThree.html

D135_ClearFloatInternalWallMethod.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/D134_ClearFloatThree.html

https://github.com/ruigege66/HTML_learning/blob/master/D135_ClearFloatInternalWallMethod.html

2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）

3.博客园：https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包

HTML连载49-清除浮动的第三种方式（内外墙法）的更多相关文章

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

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

  2. css清除浮动float的三种方法总结

    原文地址: http://my.oschina.net/leipeng/blog/221125 张大神的解析: http://www.zhangxinxu.com/wordpress/2010/01/ ...

  3. css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？一起来$('.float')

    一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class=&quo ...

  4. HTML连载48-清除浮动的其中两种方式

    一.清除浮动的方式一 给前面一个父元素设置高度,​注意:企业开发中能不写高度就不写高度 <!DOCTYPE html> <html lang="en"> & ...

  5. 49、多线程创建的三种方式之继承Thread类

    继承Thread类创建线程 在java里面,开发者可以创建线程,这样在程序执行过程中,如果CPU空闲了,就会执行线程中的内容. 使用Thread创建线程的步骤: 1.自定义一个类,继承java.lan ...

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

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

  7. 【整理】Linux下中文检索引擎coreseek4安装，以及PHP使用sphinx的三种方式(sphinxapi，sphinx的php扩展，SphinxSe作为mysql存储引擎)

          一,软件准备 coreseek4.1 (包含coreseek测试版和mmseg最新版本,以及测试数据包[内置中文分词与搜索.单字切分.mysql数据源.python数据源.RT实时索引等测 ...

  8. CSS控制样式的三种方式优先级对比验证

    入职已经一个月了,自此后,就好久没有写过博客了,在此先跟关注我的博友们说声抱歉.今天,在公司的一个培训作业的驱动以及伟哥那句“再不写博客就开除你”的监督下,我终于重拾旧爱,再次登录博客园,继续与大家分 ...

  9. Oracle 行转列总结 Case When,Decode,PIVOT 三种方式 - 转

    最近又碰到行专列问题了,当时不假思索用的是子查询,做完后我询问面试管行专列标正的写法应该如何写,他告诉我说应该用"Decode",索性我就总结一下,一共三种方式 --======= ...

随机推荐

  1. mybatis中查询结果为空时不同返回类型对应返回值

    今天在别人的代码基础上实现新需求,看到对于mybatis查询结果的判断不是很正确,如果查询结果为空就会异常,不知道大家有没有这样的疑惑:mybatis中resultType有多种返回类型,对于每种不同 ...

  2. COUNT(*)、COUNT(主键)、COUNT(1)

    MyISAM引擎,记录数是结构的一部分,已存cache在内存中; InnoDB引擎,需要重新计算,id是主键的话,会加快扫描速度: 所以select count(*)  MyISAM完胜! MyISA ...

  3. csp2019后的感慨

    你还记得曾经加入oi的初衷吗? ... 我们都不想输,可谁都没有赢... --前言 没有太大的感想,也不配去写感想...就记录一下初学者失败的原因吧.希望看过的人能引以为戒. 做题的时候,不到万不得已 ...

  4. Django中的sql注入

    Django中防止SQL注入的方法 方案一总是使用Django自带的数据库API.它会根据你所使用的数据库服务器(例如PostSQL或者MySQL)的转换规则,自动转义特殊的SQL参数.这被运用到了整 ...

  5. python之字符串的拼接总结

    加号连接 1.通过+号连接起来 逗号连接 2.通过都好连接起来 但是,这里值得注意的是,只能用于print打印,赋值组操作会生成元组 直接连接 3.直接连接中间有无空格均可 %连接 在python2. ...

  6. 这可能是最漂亮的Spring事务管理详解

    事务概念回顾 什么是事务? 事务是逻辑上的一组操作,要么都执行,要么都不执行. 事物的特性(ACID): 原子性: 事务是最小的执行单位,不允许分割.事务的原子性确保动作要么全部完成,要么完全不起作用 ...

  7. 2019年腾讯最新Java工程师面试题

    一.单选题(共21题,每题5分) 1在正则表达式当中下面那一个字符集表示非空格字符   A.[:graph:] B.[:digit:] C.[:space:] D.[:alpha:] 参考答案:A 答 ...

  8. 前端之JavaScript基础及使用方法

    JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECM ...

  9. python高级编程——进程和进程池

    python提供了一个跨平台的多进程支持——multiprocessing模块,其包含Process类来代表一个进程对象 1.Process语法结构:(注: 传参的时候一定使用关键字传参) 2.自定义 ...

  10. HTTP中的Accept-Encoding、Content-Encoding、Transfer-Encoding、Content-Type

    Accept-Encoding和Content-Encoding Accept-Encoding和Content-Encoding是HTTP中用来对采用何种压缩格式传输正文进行协定的一对header. ...