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 ...
随机推荐
- css布局：块级元素的居中
一.定宽: 1.定位居中(absolute) 方法一: html: <div class="main"></main> css: .main{ width: ...
- 前端开发APP，从HBuilder开始~
内容简介 介绍目前前端人员开发app的几种方法,具体介绍hbuilder开发app,一扇赞新的大门~ 无所不能的js 最开始js仅仅局限于网页上一些效果,操作网页内容等, 但是nodejs把js带入了 ...
- vue入门之vue-cli安装项目
第一步先安装nmp 在node.js的官网下载即可. 第二步 直接安装刚下载好的node.js即可,(这里建议不要修改node.js的安装路径),傻瓜式直接下一步即可 检测是否安装成功: 在cmd的控 ...
- 九、Shell 流程控制
Shell 流程控制 和Java.PHP等语言不一样,sh的流程控制不可为空,如(以下为PHP流程控制写法): <?php if (isset($_GET["q"])) { ...
- Node.js 特点
1.单线程 在Java.PHP或者.net等服务器端语言中,会为每一个客户端连接创建一个新的线程.而每个线程需要耗费大约2MB内存.也就是说,理论上,一个8GB内存的服务器可以同时连接的最大用户数 ...
- 绘制三角形：imageline()
<?php //1. 绘制图像资源(创建一个画布) $image = imagecreatetruecolor(500, 300); //2. 先分配一个绿色 $green = imagecol ...
- psutil——获取系统信息的Python第三方模块
本文摘自廖雪峰大神个人网站:https://www.liaoxuefeng.com/wiki/1016959663602400/1183565811281984 用Python来编写脚本简化日常的运维 ...
- git初次建立远程仓库问题
git "Could not read from remote repository.Please make sure you have the correct access rights. ...
- 数论：HDU1066-Last non-zero Digit in N!
题目: Last non-zero Digit in N! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K ...
- 遗传算法 | Java版GA_TSP （2）
嗯哼,上一篇博客中用Java实现了遗传算法求解TSP(Java版GA_TSP(我的第一个Java程序)),但明显求解效果不太好,都没太好意思贴出具体的结果,今天捣腾了下,对算法做了一些小改进,求解效果 ...