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. vue学习之路 - 4.基本操作（下）

    vue学习之路 - 4.基本操作(下) 简述:本章节主要介绍 vue 的一些其他常用指令. Vue 指令 这里将 vue 的指令分为系统内部指令(vue 自带指令)和用户自定义指令两种. 系统内部指令 ...

  2. MySQL-Xtrabackup备份还原

    前言 通常我们都是使用xtrabackup工具来备份数据库,它是一个专业的备份工具,先来简单介绍下它. Xtrabackup percona提供的mysql数据库备份工具,惟一开源的能够对innodb ...

  3. js数组删除（splice和delete）

    最近一直在写js的数组,然后就发现了很奇怪的问题,后来才发现了规律. 删除数据的一行,一般有两种方法,一个是splice,一个是delete: splice:删除了数组后,数组的长度会自动变化.用法: ...

  4. EventUtil处理js兼容性问题

    var EventUtil={ addHandler:function(element,type,handler){ //添加事件 if(element.addEventListener){ elem ...

  5. JZOJ 3493. 【NOIP2013模拟联考13】三角形

    3493. [NOIP2013模拟联考13]三角形(triangle) (File IO): input:triangle.in output:triangle.out Time Limits: 10 ...

  6. 5、python中的列表

    list是python内置的一种有序.可变的数据结构. 一.如何创建一个list? 示例: 注意: list中的元素可以是任意的数据类型如字符串.数字.布尔值.None等,也可以是其他的数据结构如另外 ...

  7. 笔记-python tutorial-9.classes

    笔记-python tutorial-9.classes 1.      Classes 1.1.    scopes and namespaces namespace: A namespace is ...

  8. 批处理文件执行cmd命令

    @echo offstart "wumin" "C:\Windows\System32\cmd.exe" osk taskkill /f /im cmd.exe ...

  9. complex类的定义、实现

    复数类complex的定义.实现(求模.复数加法) #include <iostream> #include <cmath> using namespace std; clas ...

  10. js 监听后退事件及跳转页面

    //直接跳转 window.location.href="b.html"; //返回上一级页面 window.history.back(-1); //返回下一级页面 window. ...