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. nodejs mysql模块简单封装

    nodejs 简单的封装一些mysql模块 实现一个方法根据不同传参进行增删改查 首先要 npm install mysql 代码如下 function data(objHost,sql,callba ...

  2. JS - 箭头函数与 () {} 的作用域

    foo () { // ... } 等价于 foo: function () { // ... } foo: () => { // ... } 范例: // 全局 name = 'zhangsa ...

  3. python字典形list 去重复

    data_list = [{"}] run_function = lambda x, y: x if y in x else x + [y] return reduce(run_functi ...

  4. Ubuntu16.04 hadoop 伪分布式 的文件配置

    首先需要完成java环境的配置,这里就省略了. 完成 hadoop 伪分布(pesudo distribution),只需配置下面 五 个文件即可: hadoop-env.sh core-site.x ...

  5. Python_装饰器、迭代器、生成器

    一.装饰器 装饰器的存在是为了实现开放封闭原则: 封闭: 已实现的功能代码块不应该被修改: 开放: 对现有功能的扩展开放. 理解装饰器的三要素: 函数的作用域 高阶函数 闭包 1. 闭包 闭包定义:如 ...

  6. 大数据小项目之电视收视率企业项目08--》MapReduce编写之Wordcount

    编程规范 (1)用户编写的程序分成三个部分:Mapper,Reducer,Driver(提交运行mr程序的客户端) (2)Mapper的输入数据是KV对的形式(KV的类型可自定义) (3)Mapper ...

  7. 解决cmd目录下pip命令不存在的问题

    解决cmd目录下pip命令不存在的问题 注:pip.exe程序在Python安装目录下的scripts中1.在cmd命令中输入: 先输入:python -m ensurepip 再输入:python ...

  8. Qt中修改QtoolTip的样式

    Qt中的QtoolTip有几个需要注意的: 1.不能直在堆或栈中生成QToolTip对象.因为其构造函数为私有.2.从widget获取的tooltip不是tooltip对象,而是tooltip中的文本 ...

  9. SparkSQL查询程序的两种方法，及其对比

    import包: import org.apache.spark.{SparkConf, SparkContext}import org.apache.spark.rdd.RDDimport org. ...

  10. Nodejs-文件流

    1.什么是流? 流是程序输入输出的一个连续的字节序列. 有文件流,网络流,设备(例如鼠标,键盘,磁盘,调制解调器和打印机)的输入输出都是用流来处理的. 任何数据的最根本表现形式都是二进制. 读取文件 ...