一、overflow:hidden;作用

（1）可以将超出标签范围的内容裁剪掉

（2）清除浮动

        .box1{

            background-color: red;

            /*border:1px white solid;*/

            overflow: hidden;

        }

        .box2{

            background-color: green;

            /*border:1px white solid;*/

        }

        .box1 p{

            width:100px;

            background-color: blue;

        }

        .box2 p{

            width:100px;

            background-color: red;

        }

        p{

            float:left;

        }

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

<div class="box1">

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

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

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

</div>

<div class="box2">

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

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

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

</div>

注意：在IE6中是不支持这个方法的的。

（3）可以通过overflow：hidden；让里面的盒子设置margin-top之后，外面的盒子不会被顶下来。

如下代码，我们一个大盒子里面嵌套了一个小盒子，如果不设置overflow这个属性，那么小盒子设置了margin-top属性，大小盒子就会一起被外边距顶下来，但是设置了overflow这个属性，那么大盒子就没有问题正常显示。我们以前学过的解决方法就是给大盒子添加一个border属性就可以了，但是在企业开发中如果不需要border的话，那么加上了，就是画蛇添足了。

        .box4{

            width:400px;

            height:400px;

            background-color: red;

            overflow: hidden;

        }

        .box5{

            width:200px;

            height:200px;

            margin-top: 50px;

            background-color: blue;

        }

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

<div class="box4">

    <div class="box5"></div>

</div>



二、网易注册界面基本机构搭建

1.从上到下，从外到内，从左到右，善于利用盒子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D139_FrameworkeOfNeteasyInterface</title>

    <style>

        .header{

            width:960px;

            height:80px;

            background-color: red;

            margin: 0 auto;

            overflow: hidden;

​

        }

        .content{

            width: 960px;

            height: 600px;

            background-color: blue;

            margin: 0 auto;

​

        }

        .footer{

            width: 960px;

            height: 48px;

            background-color: yellow;

            margin: 0 auto ;

        }

        .logo{

            width:748px;

            height: 47px;

            background:url("image/netEasyLogo.jpg");

            margin-top: 12px;

        }

</style>

</head>

<body>

<div class="header">

    <div class="logo" ></div>

    div.

</div>

<div class="content"></div>

<div class="footer"></div>

</body>

</html>

三、源码：

D138_ClearFloatSIx.html

D139_FrameworkeOfNeteasyInterface.html

地址:

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

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

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

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

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

HTML51-清除浮动overflow、网易注册界面基本结构搭建的更多相关文章

  1. CSS浮动与清除浮动(overflow)例子

    在css中浮动与清除浮动功能是我们开发中常用到的一个功能了,下面小编来为各位分析关于CSS浮动与清除浮动(overflow)例子吧． float脱离文本流,可是为什么文字却会有环绕的效果,这点实在是神 ...

  2. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  3. css:清除浮动 overflow

    是因为overflow除了(visible)会重新给他里面的元素建立块级格式化(block formatting context)floats, position absolute, inline-b ...

  4. css 浮动布局，清除浮动

    浮动的特性: (1)浮动元素有左浮动(float:left)和右浮动(float:right)两种 (2)浮动的元素会向左或向右浮动,碰到父元素边界.其他元素才停下来 (3)相邻浮动的块元素可以并在一 ...

  5. CSS clear both清除浮动总结

    我们知道有时候使用了CSS float浮动,会产生CSS浮动,这个时候就需要清理浮动,我们就用clear样式属性即可实现. 接下来我们来认识与学习CSS clear知识与用法. clear清除浮动目录 ...

  6. overflow:hidden的清除浮动效果

    我们都知道"overflow:hidden"可以溢出隐藏,即当内容元素的高度大于其包含块的高度时,设置该属性即可把内容区域超出来的部分隐藏,使内容区域完全包含在该包含块中. 然而& ...

  7. overflow:hidden清除浮动原理

    overflow:hidden的意思是超出部分去掉,如果父元素height为auto,内部元素浮动,势必会将内部元素全部隐藏,故计算出内部浮动高度顺便清除浮动.

  8. overflow 清除浮动

    对overflow的理解还停留在“规定当内容溢出元素框时发生的事情”,这种简单的认识上,今天发现overflow还可以清除浮动. <style> .outside{ height:auto ...

  9. 清除浮动2-父元素设置overflow:hidden

    <!doctype html><html> <head> <meta charset="UTF-8"> <meta name= ...

随机推荐

  1. Butterknife Attribute value must be constant

    背景 在下面的R.id.rv_msg_remind 标红,然后鼠标附上去,显示attribute value must be contant.如下: @BindView(R.id.rv_msg_rem ...

  2. CCF-CSP题解 201812-4 数据中心

    题目要求最长边最小的生成树.好吧,这就是一道kruskal MST题. #include <bits/stdc++.h> const int maxn = 50000; const int ...

  3. 《Java基础知识》Java包装类，拆箱和装箱

    虽然 Java 语言是典型的面向对象编程语言,但其中的八种基本数据类型并不支持面向对象编程,基本类型的数据不具备“对象”的特性——不携带属性.没有方法可调用. 沿用它们只是为了迎合人类根深蒂固的习惯, ...

  4. keras模型保存和权重保存

    模型保存和读取(包括权重): model.save('./model.h5') from keras import models model = models.load_model(./model.h ...

  5. Blockchain 基本知识

    本文是前奏,本来要介绍Azure上的Azure Blockchain Service,发现,需要从什么是区块链开始讲起... 什么是区块链?我们从比特币说起, 2008年11月,中本聪提出了比特币白皮 ...

  6. python多线程编程—同步原语入门（锁Lock、信号量(Bounded)Semaphore）

    摘录python核心编程 一般的,多线程代码中,总有一些特定的函数或者代码块不希望(或不应该)被多个线程同时执行(比如两个线程运行的顺序发生变化,就可能造成代码的执行轨迹或者行为不相同,或者产生不一致 ...

  7. 位域-isa指针

    一.isa指针结构 union isa_t { isa_t() { } isa_t(uintptr_t value) : bits(value) { } Class cls; uintptr_t bi ...

  8. puppeteer开发

    Chromium下载问题 https://github.com/GoogleChrome/puppeteer/ https://download-chromium.appspot.com/?platf ...

  9. Oracle - exp实战

    一.概述 exp/imp是oracle中的一个逻辑导出和导入工具,假想一个场景,当我们使用exp命令在对用户进行导出的时候,如果该用户中的某些表的数据有修改,或表结构进行了修改,或者表被删除,那么我们 ...

  10. Xshel和Xftp免费版

    打开:https://www.netsarang.com/zh/free-for-home-school/ 然后填写自己的姓名与真实的邮箱即可.提交成功后,会将下载链接发送至刚才填写的邮箱里,发送的下 ...