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. 谈谈Integer中的静态类IntegerCache

            学习的本质就是一个赋值的过程,用新知识来覆盖你的旧知识或者无知(null).掌握知识是自己的, 分享知识,才能帮助更多的人,创造更大的价值.学贵以恒,以此自勉,与君共享.----曦阳X ...

  2. Linux监控一之Nagios的安装与配置

    一.Nagios简介 Nagios是一款开源的电脑系统和网络监视工具,能有效监控Windows.Linux和Unix的主机状态,交换机路由器等网络设置,打印机等.在系统或服务状态异常时发出邮件或短信报 ...

  3. 关于mybatis callSettersOnNulls 配置

    今天做了一件坑了自己的事情,为此浪费了好多时间... 在mybatis的设置中,看到了这样的一行设置.出于程序员的好奇,去搜索了一下,这条设置是干什么的. <setting name=" ...

  4. ActiveMQ RabbitMQ RokcetMQ Kafka实战 消息队列中间件视频教程

    附上消息队列中间件百度网盘连接: 链接: https://pan.baidu.com/s/1FFZQ5w17e1TlLDSF7yhzmA 密码: hr63

  5. DevOps - 日志分析 -ELK

    wget --no-check-certificate --no-cookies --header "Cookie: oraclelicense=accept-securebackup-co ...

  6. tcl之变量-简单变量

  7. JZOJ 5777. 【NOIP2008模拟】小x玩游戏

    5777. [NOIP2008模拟]小x玩游戏 (File IO): input:game.in output:game.out Time Limits: 1000 ms  Memory Limits ...

  8. python网络-多任务实现之协程(27)

    一.协程 协程,又称微线程,纤程.英文名Coroutine. 协程不是进程,也不是线程,它就是一个函数,一个特殊的函数——可以在某个地方挂起,并且可以重新在挂起处继续运行.所以说,协程与进程.线程相比 ...

  9. python3下最全的wordcloud用法，附源代码及相关文件

    一.wordcloud是什么 词云,在一段文本中提取关键词进行扁平化的展示,更能吸引目标客户的眼球. 市面上有很多在线生成词云的工具,本文以Python中的第三方库wordcloud为例讲解如何自动生 ...

  10. 809. Expressive Words

    https://leetcode.com/problems/expressive-words/description/ class Solution { public: int expressiveW ...