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. Linux yum安装

    一．安装Apache软件步骤:1.安装 yum install httpd 2.启动,关闭 重启等命令systemctl start httpd.service(启动)systemctl restar ...

  2. 把网上图片下载到本地的java工具类

    package com.swift; import java.io.File; import java.io.FileOutputStream; import java.io.InputStream; ...

  3. JavaScript深拷贝与浅拷贝的理解

    个人是这么理解深拷贝和浅拷贝的:就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力. 一起看看我举的浅拷贝栗子: let ...

  4. JAVA JDBC 连接 Oracle

    使用 Junit 测试类编写 public class JdbcTest { private Connection con = null;// 创建一个数据库连接 private PreparedSt ...

  5. Linux问题分析或解决_samba无法连接

    1. windows设置方面问题 问题:window能连接部分服务器的samba共享,一部分无法连接.报错如截图. 解决:前提---其他人连接都没有问题,发现有问题的连接服务器的电脑是win10,而w ...

  6. nodejs源码—初始化

    概述 相信很多的人,每天在终端不止一遍的执行着node这条命令,对于很多人来说,它就像一个黑盒,并不知道背后到底发生了什么,本文将会为大家揭开这个神秘的面纱,由于本人水平有限,所以只是讲一个大概其,主 ...

  7. Python猫荐书系列之七：Python入门书籍有哪些？

    本文原创并首发于公众号[Python猫],未经授权,请勿转载. 原文地址:https://mp.weixin.qq.com/s/ArN-6mLPzPT8Zoq0Na_tsg 最近,猫哥的 Python ...

  8. Ubuntu下的定时备份数据库

    1.编写备份数据库的shell脚本 mysqldump -uUserName -pPassword dbName >/XXX/XXXX/XXXX/fileName_$(date +%Y%m%d_ ...

  9. Curl之解决中文乱码

    利用iconv命令 curl http://www.baidu.com | iconv -f gb2312 -t utf-8 iconv命令可以将一种已知的字符集文件转换成另一种已知的字符集文件.它的 ...

  10. 快速排序算法（C）

    sort快排函数的基本版,效率n*logn,快排的完全版就是在递归之中夹杂对序列的预判断,最优的选择排序方法,快速排序算法只是其中之一. 简单的说明一下快速排序的思想,对于一个数列,首先选择一个基数( ...