一、设计网页的思想

拿到需求之后我们先对各个模块（盒子）进行划分，然后从外到内进行设计（1）设计一个盒子最基本的设计大致包括背景颜色（其实用于识别），宽，高，边界浮动流还是标准流.

（2）然后盒子和盒子之间的外边距margin

（3）然后在进入到小盒子中，进一步划分盒子，这样再重复第一二步

注意点：我们用背景颜色可以识别出各个模块的具体划分，然后在进入到小盒子进行划分，别忘记最后把原来的大盒子背景颜色去掉。（边界无色为none）

二、浮动元素的高度问题

1.在标准流中内容的高度可以撑起父元素的高度。

2.在浮动流中浮动的元素是不可以撑起父元素的高度的。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D129_FloatExcriseXia</title>

    <style>

        .fuyuansu,.fuyuansu1{

            border:2px black solid;

        }

        .biaozhun{

            width:100px;

            height: 100px;

            background-color: red;

        }

        .fudong{

            width:100px;

            height: 100px;

            background-color: yellow;

            float:left;

        }

</style>

</head>

<body>

<div class="fuyuansu1">

    <div class="biaozhun"></div>

</div>

<hr>

<div class="fuyuansu">

    <div class="fudong"></div>

</div>

</body>

</html>

三、源码：

D129_FloatExcriseXia.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/D129_FloatExcriseXia.html​

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

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

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

HTML连载47-设计思想、浮动元素高度问题的更多相关文章

  1. 如何解决浮动元素高度塌陷---CSS

    解决高度塌陷问题的方法: 方法一. //给父元素添加声明 overflow:hidden; 缺点:回隐藏溢出的元素: 方法二. 在浮动的元素下添加空div标签,并给该元素添加声明: clear:bot ...

  2. float浮动问题：会造成父级元素高度坍塌；

    float浮动问题:会造成父级元素高度坍塌: 解决办法:清除浮动:clear:both; 给父元素高度:height(不是很可取) 给父元素:display:inline-black:(问题:marg ...

  3. 解决float浮动带来的父元素高度没有的问题---清除浮动

    float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...

  4. 关于子元素的margin-top溢出和元素浮动对父元素高度影响解决方案

    以下是个人学习笔记,仅供学习参考. 1.关于子元素的margin-top作用在无margin-top-border的父元素上导致子元素的margin-top溢出问题. 在给没有margin-top-b ...

  5. css浮动中避免包含元素高度为0的4种解决方法

    问题:当子元素中使用了float时,如果其父元素不指定高度,其高度将为0 解决:清除(闭合)浮动元素,使其父div高度自适应 方法一:额外标签+clear:both     (W3C推荐方法,兼容性较 ...

  6. float浮动导致父元素高度坍塌的原因及清除浮动方法

        一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内, ...

  7. HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法（高度欺骗）

    元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...

  8. Volley设计思想和流程分析

    本文是对Volley思路的整体整理,并不是Volley教程,建议有Volley使用经验,但是对Volley整体不是很清楚的同学阅读. 我认为,弄清整体的流程很重要,以避免一叶障目不见泰山的囧境,而对于 ...

  9. MapReduce原理与设计思想

    简单解释 MapReduce 算法 一个有趣的例子 你想数出一摞牌中有多少张黑桃.直观方式是一张一张检查并且数出有多少张是黑桃? MapReduce方法则是: 给在座的所有玩家中分配这摞牌 让每个玩家 ...

随机推荐

  1. synchronized凭什么锁得住？

    相关链接: <synchronized锁住的是谁?> 我们知道synchronized是重量级锁,我们知道synchronized锁住的是一个对象上的Monitor对象,我们也知道sync ...

  2. LeetCode刷题191123

    博主渣渣一枚,刷刷leetcode给自己瞅瞅,大神们由更好方法还望不吝赐教.题目及解法来自于力扣(LeetCode),传送门. 算法: 给出一个区间的集合,请合并所有重叠的区间. 示例 1: 输入: ...

  3. YourSQLDba的共享路径备份遭遇重启问题

    如果YourSQLDba设置过共享路径备份(具体参考博客YourSQLDba设置共享路径备份),有时候服务器重启后,备份就会出错,具体错误信息类似如下所示: Date        2019/9/25 ...

  4. 图像的相似度Hash算法

    Hash算法有三种,分别为平均哈希算法(aHash).感知哈希算法你(pHash)和差异哈哈希算法(dHash). 针对以上三种的Hash算法详解见博客园文章 https://www.cnblogs. ...

  5. 痞子衡嵌入式：飞思卡尔i.MX RTyyyy系列MCU启动那些事（2）- Boot配置(BOOT Pin/eFUSE)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RTyyyy系列MCU的Boot配置. 在上一篇文章 Boot简介 里痞子衡为大家介绍了Boot基本原理以及i.MXR ...

  6. Laravel 即时应用的一种实现方式

    即时交互的应用 在现代的 Web 应用中很多场景都需要运用到即时通讯,比如说最常见的支付回调,与三方登录.这些业务场景都基本需要遵循以下流程: 客户端触发相关业务,并产生第三方应用的操作(比如支付) ...

  7. js里面的键盘事件对应的码值

    键盘事件对应的码值keyCode 8 = BackSpace BackSpacekeyCode 9 = Tab TabkeyCode 12 = ClearkeyCode 13 = EnterkeyCo ...

  8. C sharp #006# 委托与事件

    饮水思源:金老师的自学网站 索引 委托(Delegate) Click事件探究 委托(Delegate) “不学会委托(Delegate),等于没学.NET编程!” 例程1-委托类型变量 using ...

  9. cocos2d-x 新工程的把玩

    创建了cocos的工程以及初步了解了工程的结构之后,可以尝试自己改改代码了 游戏窗口的设置 首先是AppDelegate,找到AppDelegate.cpp中AppDelegate::applicat ...

  10. 手机分辨率DPI怎么计算

    长度方向像素数平方加宽度方向像素平方然后开根号,最后除以屏幕大小(英寸)