1、CSS 盒子模型：

2、float 支持属性：left right none inherit（部分支持）

（1）float 属性影响范围：对紧随其后的块儿级元素起作用。

（2）清除浮动常用方法：在受影响的元素上

（3）对overflow：hidden 的理解

例如：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        .wrap{

            width: 80%;

            margin:0 auto;

        }

        .content{

            background-color: gray;

            /*height: 500px;*/

            /*overflow: hidden;*/

        }

        .left{

            width: 80%;

            height: 300px;

            background-color: aqua;

            float: left;

        }

        .right{

            width: 10%;

            height: 800px;

            background-color: yellow;

            float: left;

        }

        .footer{

            background-color: red;

        }

    </style>

</head>

<body>

<div class="wrap">

    <div class="content">

        <div class="left">

            left

        </div>

        <div class="right">

            right

        </div>

    </div>

    <div class="footer">

        footer

    </div>

</div>

</body>

</html>

（1）浮动后，footer 挤到顶部

（2）parent 加上 overflow:hidden;

    • 我们原先的理解是，在一个平面上的浮动，但是通过试验，我们发现，这不仅仅是一个平面上的浮动，而是一个立体的浮动！也就是说，当content 这个div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了box这个div，也就是说，此时的content 的宽高是多少，对于已经脱离了的box来说，都是不起作用的。当我们全面的理解了浮动这个词的含义的时候，我们就理解overflow:hidden这个 属性中的解释，清除浮动是什么意思了。
    • 当我们给box这个div加上overflow:hidden这个属性的时候，其中的content 等等带浮动属性的div的在这个立体的浮动已经被清除了。这就是overflow:hidden这个属性清除浮动的准确含义。当我们没有给box这个 div设置高度的时候，content 这个div的高度，就会撑开box这个div，而在另一个方面，我们要注意到的是，当我们给box这个div加上一个高度值，那么无论content 这个div的高度是多少，box这个高度都是我们设定的值。而当content 的高度超过box的高度的时候，超出的部分就会被隐藏。这就是overflow的含义！           　　　　

float 及 overflow 的理解的更多相关文章

  1. 转: CSS中float和clear的理解

    float:浮动,比如,默认的,我们知道,div是占满一行的,现在我们想把两个div显示在一行上,那怎么办呢<div style="width:100px;">1111 ...

  2. 简明的例子讲解position:relative、float、overflow:hidden和inline-block

    标签(空格分隔): css relative float 我们通过一个简单的实验来了解position:relative float overflow:hidden 和 inline-block. 下 ...

  3. CSS.04 -- 浮动float、overflow、定位position、CSS初始化

    标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right :  设置浮动的元素,脱离标准流 浮动的框可以向左或向右移动,直到它的外边缘碰 ...

  4. 利用float与overflow:hidden实现移动端两栏自适应布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. float 的先后顺序 理解流

    <!DOCTYPE html><html><head><style> p{float:right;}</style></head> ...

  6. 关于overflow的理解

    overflow会把超出父盒子的部分继续不同修改 在这我只执行一个常用属性值 原始代码如下(未设置overflow前): 执行结果: 设置后运行结果:

  7. 深入理解和应用Float属性

    一.Float的特性 1. 应用于文字围绕图片 2. 创建一个块级框 3. 多列浮动布局 4. 浮动元素的宽度.高度自适应,但可以设置其值. 二.核心解决的问题 文字围绕图片:img标签与多个文本标签 ...

  8. overflow 在float浮动标签里的作用

    overflow可以使浮动元素回归文档流,但是浮动元素却仍然具有浮动的属性 <!DOCTYPE html> <html lang="en"> <hea ...

  9. overflow 清除浮动

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

随机推荐

  1. 微信小程序的开发——01小程序的执行流程是怎样的？

    作者:叶小钗 转载至:https://www.cnblogs.com/yexiaochai/p/9346043.html 我们这边最近一直在做基础服务,这一切都是为了完善技术体系,这里对于前端来说便是 ...

  2. C++的新特性for-each

    C++实验课要求用for each 循环来实现关联容器 map 的输出,一开始完全萌比.查了好久的资料才整理出下面的: C++11新特性之一就是类似java的for each循环: map<in ...

  3. Python数据类型的用法

    字符串的用法 res = 'hellow,world' print(res) #res.显示的都是它的方法,下划线的除外 1 判断字符串的结尾字符,返回的值的布尔形式 endswith 判断字符串的开 ...

  4. 学习Pytbon第三天，用户输入

    _username ='dream' #定义用户名 _password ='dream123'#定义用户密码username = input("username:")#请输入用户名 ...

  5. Computer HDU - 2196

    Computer HDU - 2196 A school bought the first computer some time ago(so this computer's id is 1). Du ...

  6. 2017 United Kingdom and Ireland Programming（Gym - 101606）

    题目很水.睡过了迟到了一个小时,到达战场一看,俩队友AC五个了.. 就只贴我补的几个吧. B - Breaking Biscuits Gym - 101606B 旋转卡壳模板题.然后敲错了. 代码是另 ...

  7. The DOM in JavaScript

    DOM : Document Object Model   D is for document :  The DOM cant work without a document . When you c ...

  8. xposed的基本使用

    一.原理 Android运行的核心是zygote进程,所有app的进程都是通过zygote fork出来的.通过替换system/bin/下面的app_process等文件,相当于替换了zygote进 ...

  9. IOS开发---菜鸟学习之路--（十）-实现新闻详细信息浏览页面

    前面已经将了上下拉刷新 实现了上下拉刷新后我们的第一级界面就做好,接下来我们就需要实现 新闻详细信息浏览了 我个人认为一般实现新闻详细页面的方法有两种(主要是数据源的不同导致了方法的不同) 第一种是本 ...

  10. IOS开发学习笔记011-xcode使用技巧

    xcode使用技巧 1.自动生成类 2.断点调试 3.代码段保存 4.注释标记 1.新建类,自动生成两个文件和基本结构 第一步  第二步,选择新建一个类,而不是一个源文件  第三步,书写类名一级自己要 ...