float 及 overflow 的理解
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 的理解的更多相关文章
- 转: CSS中float和clear的理解
float:浮动,比如,默认的,我们知道,div是占满一行的,现在我们想把两个div显示在一行上,那怎么办呢<div style="width:100px;">1111 ...
- 简明的例子讲解position:relative、float、overflow:hidden和inline-block
标签(空格分隔): css relative float 我们通过一个简单的实验来了解position:relative float overflow:hidden 和 inline-block. 下 ...
- CSS.04 -- 浮动float、overflow、定位position、CSS初始化
标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right : 设置浮动的元素,脱离标准流 浮动的框可以向左或向右移动,直到它的外边缘碰 ...
- 利用float与overflow:hidden实现移动端两栏自适应布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- float 的先后顺序 理解流
<!DOCTYPE html><html><head><style> p{float:right;}</style></head> ...
- 关于overflow的理解
overflow会把超出父盒子的部分继续不同修改 在这我只执行一个常用属性值 原始代码如下(未设置overflow前): 执行结果: 设置后运行结果:
- 深入理解和应用Float属性
一.Float的特性 1. 应用于文字围绕图片 2. 创建一个块级框 3. 多列浮动布局 4. 浮动元素的宽度.高度自适应,但可以设置其值. 二.核心解决的问题 文字围绕图片:img标签与多个文本标签 ...
- overflow 在float浮动标签里的作用
overflow可以使浮动元素回归文档流,但是浮动元素却仍然具有浮动的属性 <!DOCTYPE html> <html lang="en"> <hea ...
- overflow 清除浮动
对overflow的理解还停留在“规定当内容溢出元素框时发生的事情”,这种简单的认识上,今天发现overflow还可以清除浮动. <style> .outside{ height:auto ...
随机推荐
- 黑马基础阶段测试题：定义一个int类型的数组，数组中元素为｛5，7，3，9，4｝。求出数组中的最小值，并判断最小值是否为偶数，如果是偶数则输出“最小值为偶数”，如果不是偶数则输出“最小值为奇数”。打印如下：
package com.swift; import java.util.Arrays; public class ArrayTest { public static void main(String[ ...
- 解决: Intelij IDEA 创建WEB项目时没有Servlet的jar包
今天创建SpringMVC项目时 用到HttpServletRequest时, 发现项目中根本没有Servlet这个包, 在网上搜了一下,这个问题是因为web项目没有添加服务器导致的. 配置tomec ...
- 牛客小白月赛5 F 圆(circle) 【欧拉定理】
题目连接: https://www.nowcoder.com/acm/contest/135/F 签到题来了,送你们一个Python秒的题. Apojacsleam来到了OI大陆,经过了连年征战,成为 ...
- 【点分树】codechef Yet Another Tree Problem
已经连咕了好几天博客了:比较经典的题目 题目大意 给出一个 N 个点的树和$K_i$, 求每个点到其他所有点距离中第 $K_i$ 小的数值. 题目分析 做法一:点分树上$\log^3$ 首先暴力做法: ...
- 分享一个漂亮按钮插件FancyButtons
一转眼,2018年的第10天就这样过去了.回看17年,曾经做了些啥都忘记了,就像每一天写日志时的样子(双手放在键盘上,怒着嘴,抬着头,望着天花板), 然后突然记得好像好久没有写随笔了(@_@).自从配 ...
- 关于PHPExcel导出Excel时身份证,数字会导出为科学计数的处理方法
上次在开发一个项目时,用到PHPExcel导出数据,其中有导出身份证等长串数字时导出的Excel中显示为科学计数方式. 这种显示很不人性化而且量多了修改起来也很麻烦. 这是因为Excel处理数字里默认 ...
- linux 的安装
3linux 软件安装 3.1 vm ware 软件安装 双击VMware-workstation-full-10.0.2-1744117.1398244508.exe 单击下一步 单击下一步 选择典 ...
- 刷表法动态规划：HOJ11391_Word Clouds Revisited
题目大意,给若干方块,让把方块拍成若干行,使得最终高度最小.其中,每行有宽度限制,高度为每行中最高的箱子的高度. 于是,很直观的认为,这个题可能也许大概应该是个动态规划的题. 于是,设DP[K]为K及 ...
- as API一些容易忘记的属性和方法
1.在flash动画里的一些动态文本会随着动画的执行,有抖动,解决问题的方法: tt为动画里的动态文本,tt.transform.matrix=null;
- 【Letter Combinations of a Phone Number】cpp
题目: Given a digit string, return all possible letter combinations that the number could represent. A ...