HTML连载49-清除浮动的第三种方式(内外墙法)
一、清除浮动的第三种方式
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-清除浮动的第三种方式(内外墙法)的更多相关文章
- 【转】css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...
- css清除浮动float的三种方法总结
原文地址: http://my.oschina.net/leipeng/blog/221125 张大神的解析: http://www.zhangxinxu.com/wordpress/2010/01/ ...
- css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')
一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class=&quo ...
- HTML连载48-清除浮动的其中两种方式
一.清除浮动的方式一 给前面一个父元素设置高度,注意:企业开发中能不写高度就不写高度 <!DOCTYPE html> <html lang="en"> & ...
- 49、多线程创建的三种方式之继承Thread类
继承Thread类创建线程 在java里面,开发者可以创建线程,这样在程序执行过程中,如果CPU空闲了,就会执行线程中的内容. 使用Thread创建线程的步骤: 1.自定义一个类,继承java.lan ...
- css清除浮动float的几种方法
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度, ...
- 【整理】Linux下中文检索引擎coreseek4安装,以及PHP使用sphinx的三种方式(sphinxapi,sphinx的php扩展,SphinxSe作为mysql存储引擎)
一,软件准备 coreseek4.1 (包含coreseek测试版和mmseg最新版本,以及测试数据包[内置中文分词与搜索.单字切分.mysql数据源.python数据源.RT实时索引等测 ...
- CSS控制样式的三种方式优先级对比验证
入职已经一个月了,自此后,就好久没有写过博客了,在此先跟关注我的博友们说声抱歉.今天,在公司的一个培训作业的驱动以及伟哥那句“再不写博客就开除你”的监督下,我终于重拾旧爱,再次登录博客园,继续与大家分 ...
- Oracle 行转列总结 Case When,Decode,PIVOT 三种方式 - 转
最近又碰到行专列问题了,当时不假思索用的是子查询,做完后我询问面试管行专列标正的写法应该如何写,他告诉我说应该用"Decode",索性我就总结一下,一共三种方式 --======= ...
随机推荐
- linux 源设置
ubuntu 18.04.3 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak cat > /etc/apt/sources.lis ...
- CSS新特性之3D转换
1. 三维坐标系 x轴:水平向右(右边是正,左边是负) y轴:垂直向下(向下是正,向上是负) z轴:垂直屏幕(向外是正,向里是负) 2. 3D转换 3D转换中最常用的是3D位移和3D旋转.主要知识点如 ...
- mysql分组报错Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column
环境:Server version: 5.7.27-0 ubuntu 18.04.1 (Ubuntu) 执行分组语句:select * from pet group by owner;时报错: mys ...
- vue--过滤与动画
什么是过渡和动画 元素在显示和隐藏时,实现过渡或者动画的效果,常用的过滤和动画都是使用CSS来实现的. 在CSS中操作transition(过渡)或 animation(动画)达到不同效果 为目标元素 ...
- PHP 实现精确统计在线人数功能
有需要学习交流的友人请加入交流群的咱们一起,有问题一起交流,一起进步!前提是你是学技术的.感谢阅读! 点此加入该群jq.qq.com PHP对session对象的封装的很好,根据HTTP协议,每个范 ...
- SPARQL入门(一)SPARQL简介与简单使用
知识图谱(Knowledge Graph)是当前互联网最炙手可热的技术之一,它的典型应用场景就是搜索引擎,比如Google搜索,百度搜索.我们在百度搜索中输入问题"中国银行的总部在哪&q ...
- CSS定位的属性值
关于CSS定位都是老生常谈的问题了,不过有一个问题,最新的属性值在某些网站上并没有被更新到教程上 下面我记录一下 position现在有五个属性值 1.static:静态定位,没有特殊的定位规则,遵循 ...
- C++ `endl` 与 `\n` 的区别
std::cout << std::endl : 插入换行并刷新缓存区 (flush the buffer) std::cout << "\n" : 插入换 ...
- java基础(5):流程控制语句(switch)、数组
1. 流程控制语句(续) 1.1 选择结构switch switch 条件语句也是一种很常用的选择语句,它和if条件语句不同,它只能针对某个表达式的值作出判断,从而决定程序执行哪一段代码.例如,在程序 ...
- WM消息大全,windows消息大全
WM消息大全 消息名 消息值 说明 WM_CREATE 0x0001 应用程序创建一个窗口 WM_DESTROY 0x0002 一个窗口被销毁 WM_MOVE 0x0003 移动一个窗口 WM_SIZ ...