margin的塌陷现象及解决方案

   如果一个大盒子中包含一个小盒子,给小盒子设置margin-top,大盒子会一起向下平移

- 解决方案:
1. 给大盒子加一个边框(border)
2. 给大盒子设置`overflow:hiden;`
3. 设置小盒子浮动

浮动

float: left; //左浮动 
float: right; //右浮动
- 浮动后的元素层级比标准流高
- 浮动后的元素显示模式会变成行内块

清除浮动

浮动的影响:大盒子不设置高度,而且大盒子中的子盒子全部浮动,则大盒子的高度将不会被撑开 
清除浮动:
1. 额外标签法:在浮动的元素后面加一个div,给这个div设置clear:both;
- 内部标签法:可以撑开父盒子的高度
- 外部标签法:不能撑开父盒子的高度 2. 给大盒子设置overflow: hidden; - 缺点:超出大盒子范围的内容会被裁剪
3. 伪元素清除浮动
.clearfix:after {
content:"";
height: 0;
line-height: 0;
display: block;
visiblity: hidden;
clear: both; } .clearfix { zoom: 1;/*兼容ie6*/ }

css清除公共样式

/*css初始化*/
/* 清除标签的默认margin padding*/
html,body,ul,li,dl,dt,dd,h1,h2,h3,p,img,input { margin: 0; padding: 0; } /*清除img的边框*/
img { border: 0; } /*清除li标签前的小点*/
li { list-style: none; } /*设置页面统一文字字体和颜色*/
body { font-size: 12px; color: #434343; font-family: "宋体"; } /*清除浮动*/
.clearfix:after { content: ""; height: 0; line-height: 0; display: block; visibility: hidden; clear: both; }
.clearfix { zoom: 1;/*兼容ie6*/ } /*a标签设置*/ a { color: #434343; text-decoration: none;/*去下划线*/ } a:hover { color: green; } /*左浮动*/
.fl { float: left; } /*右浮动*/
.fr { float: right; }

html基础整理(02浮动 问题)的更多相关文章

  1. mysql基础整理02

    比较运算符 > < = >= <= !=和<> !=和<>都是一个意思,都是不等于的意思 and和or and 并且&& 需要同时满足多 ...

  2. CSS3基础入门02

    CSS3 基础入门02 边框相关属性 border-radius 通过这个属性我们可以设置边框圆角,即可以将四个角设置为统一的圆角,也可以单独的设置具体的某一个角的圆角. grammer: borde ...

  3. [转帖]nginx基础整理

    nginx基础整理 https://www.cnblogs.com/guigujun/p/6588545.html 目录结构如下: Nginx基础知识 Nginx HTTP服务器的特色及优点 Ngin ...

  4. 【T-SQL基础】02.联接查询

    概述: 本系列[T-SQL基础]主要是针对T-SQL基础的总结. [T-SQL基础]01.单表查询-几道sql查询题 [T-SQL基础]02.联接查询 [T-SQL基础]03.子查询 [T-SQL基础 ...

  5. MongoDB基础知识 02

    MongoDB基础知识 02 6 数据类型 6.1 null : 表示空值或者不存在的字段 {"x":null} 6.2 布尔型 : 布尔类型只有两个值true和false {&q ...

  6. 机器学习 —— 基础整理(六)线性判别函数:感知器、松弛算法、Ho-Kashyap算法

    这篇总结继续复习分类问题.本文简单整理了以下内容: (一)线性判别函数与广义线性判别函数 (二)感知器 (三)松弛算法 (四)Ho-Kashyap算法 闲话:本篇是本系列[机器学习基础整理]在time ...

  7. MySQL基础整理(一)之SQL基础(未完成)

    大家好,我是浅墨竹染,以下是MySQL基础整理(一)之SQL基础 1.SQL简介 SQL(Structure Query Language)是一种结构化查询语言,是使用关系模型的数据库应用语言. 2. ...

  8. Blender 基础 骨架-02 骨架的各种呈现方式

    Blender 基础 骨架-02 - 骨架的各种呈现方式 我使用的Blender版本:Blender V 2.77 前言 在 Blender 基础 骨架-01 教程里面,将骨架和模型联系在一起,我们在 ...

  9. nutch的一些基础整理

    nutch的一些基础整理 原创 2015年03月22日 18:18:01 标签: nutch / 240 编辑 删除 一.关于配置文件: nutch-default.xml:爬虫的默认配置.在${nu ...

  10. Linux基础命令-02

    Linux基础命令-02:

随机推荐

  1. final关键字的简单理解

    final可以修饰类,方法,变量. 1.final修饰的类,不可以被继承. 2.final修饰方法,可以把方法锁定,以防任何继承类修改它的含义. 3.fianl修饰的变量,如果是基本数据类型的变量,则 ...

  2. 01b-1: 性能测度

  3. 2015年传智播客JavaEE 第168期就业班视频教程 02-ERP简介

    其实ERP描述的是管理一个企业的整体的所有的资源.ERP是帮你管整个企业的运行.那它是管哪一类企业呢?比如说帮光线传媒.ERP更多是用在生产制造企业,这是最好的,其次的就是这种销售型企业,二道贩子那种 ...

  4. iOS App图标和启动画面尺寸

    注意:iOS所有图标的圆角效果由系统生成,给到的图标本身不能是圆角的. 1. 桌面图标 (app icon) for iPhone6 plus(@3x) : 180 x 180 for iPhone ...

  5. 去掉redhat linux提示注册

    去掉提示注册的话,卸载几个软件包:#rpm -qa | grep subscription-manager 然后移除那出现的几项吧:#yum remove subscription-manager-g ...

  6. win10系统的快捷键

    1.win10特有的快捷键:任务视图和虚拟桌面相关 (1)Win + Tab:查看任务视图 (2)Win + Ctrl + D:在任务视图中新建虚拟桌面 (3)Win + Ctrl + F4:关闭当前 ...

  7. Golang之函数练习

    小例题: package main import "fmt" /* 函数练习, 可变参数使用 写一个函数add 支持1个或多个int相加,并返回相加结果 写一个函数concat,支 ...

  8. 没有Home键之后的iPhone会是什么样子?

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 之前笔者推测新一代的iPhone不会再有“Home”键.果不其然,9月13日苹果发布会证实了笔者的观 ...

  9. 【工具推荐】ELMAH——可插拔错误日志工具(转)

    出处:http://www.cnblogs.com/liping13599168/archive/2011/02/23/1962625.html 今天看到一篇文章(构建ASP.NET网站十大必备工具( ...

  10. mongoTemplate更新一个Document里面的数组的一个记录。

    假如有一个Document如下: { "_id" : "69bca85a-5a61-4b04-81fb-ff6a71c3802a", "_class& ...