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. rabbitmq的简单介绍二

    上一篇博客我们没有介绍完rabbitmq,今天我们接着上一篇的博客继续介绍rabbitmq 这边的博客的内容如下 1.组播,对指定的队列设置关键词,通过关键词来控制消息的分发 2.更加细致的组播 先来 ...

  2. C语言中的序列点和副作用

    参考: http://www.2cto.com/kf/201210/161225.html

  3. ultraiso制作ubuntu u盘启动

    http://blog.csdn.net/yaoyut/article/details/78003061

  4. SSL握手通信详解及linux下c/c++ SSL Socket代码举例

    SSL握手通信详解及linux下c/c++ SSL Socket代码举例 摘自:http://www.169it.com/article/3215130236.html   分享到:8     发布时 ...

  5. DataStage 七、在DS中使用配置文件分配资源

    DataStage序列文章 DataStage 一.安装 DataStage 二.InfoSphere Information Server进程的启动和停止 DataStage 三.配置ODBC Da ...

  6. SOCKET句柄泄露带来的内存灾难

    前些时候游戏莫名其妙出现大量内存泄露,我感到很诧异,当然一般情况下游戏的内存管理是极其严苛的,出现如此大量的内存泄露到底是怎么回事? 句柄滥用导致的内存泄露会多夸张呢,尤其SOCKET,在某些客户端系 ...

  7. jquery,禁止冒泡和默认行为

    如果在页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出现冒泡问题.//HTML 页面<div style="width:200px;height:200px;ba ...

  8. 使用cmd命令登录mysql数据库时报2013-Lost connection to MYSQL server at 'waiting for initial communication packet',system error:0

    [错误内容]:SQL Error (2013): Lost connection to MySQL server at 'waiting for initial communication packe ...

  9. openssl生成ssl证书(转)

    原文:http://blog.sina.com.cn/s/blog_4fd50c390101891c.html x509证书一般会用到三类文,key,csr,crt. Key 是私用密钥openssl ...

  10. util:properties

    示例 <util:properties id="db" location="classpath:db.properties" /> 全部属性 功能概 ...