一、设计网页的思想

拿到需求之后我们先对各个模块（盒子）进行划分，然后从外到内进行设计（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. December 07th, Week 49th Saturday, 2019

    Snowflakes are pretty patterns etched in water's dreams. 雪花,是水在梦中镌刻的美丽图案. From Anthony T.Hincks. Tod ...

  2. Appium(二)：Node.js下载与安装、非GUI版本appium下载与安装、GUI版本appium下载与安装

    1. 下载并安装Node.JS 进入官网:https://nodejs.org/en/. 由于我们是新手嘛,所以肯定是越稳定越好啦,所以选择下载LTS版本. 进入文件下点击文件就进入安装界面了,点击n ...

  3. [洛谷P1972][题解][SDOI2009]HH的项链

    别碰我! 自己还是太蒟了…… 看了好久,最后抄参考题解打出来的…… 前面的可能影响后面的,所以按照询问右端点排序 这时候维护一个前缀和数组就可以了, 那么问题又来了,去重? 可以这样,从前往后枚举,如 ...

  4. redis启动错误： Warning: no config file specified, using the default config. In order to specify a config

    redis启动错误: Warning: no config file specified, using the default config. In order to specify a config ...

  5. MySQL 在 Windows 下安装教程、避坑指南

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,2008 年被 SUN 公司收购,后 SUN 公司又被 Oracle 公司收购. 一.下载 MySQL 官网 https:/ ...

  6. CSS置换元素和非置换元素

    置换元素: 1. 一个内容 不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素.  2. 置换元素就是浏览器根 ...

  7. Java学习 1.3——Java开发环境的搭建：安装JDK，配置环境变量

    了解了基本的Java知识后,就需要开始搭建开发环境了. 一,安装JDK JDK1.8下载地址 接受协议,选择选择自己的系统,我的是Windows64位: 点进去后会让你登录Oracle账号,没有就创建 ...

  8. Format a Property Value 设置属性值的格式

    In this lesson, you will learn how to set a display format and an edit mask to a business class prop ...

  9. C# 新特性 操作符单?与??和 ?. 的使用

    1.单问号(?) 1.1 单问号运算符可以表示:可为Null类型,C#2.0里面实现了Nullable数据类型 //A.比如下面一句,直接定义int为null是错误的,错误提示为无法将null转化成i ...

  10. 使用NodeJS模块-第三方提供的模块（什么是npm）

    第三方开发者提供的模块 第三方模块是由NodeJS社区或第三方个人开发的功能模块,这些功能模块以软件包的形式存在.被发布在npmjs注册表中.npmjs是一个注册中心,所有软件包的信息都会被记录到该注 ...