HTMLCSS学习笔记（四）----浮动原理及清浮动

浮动的原理

inline-block

1. 使块元素在一行显示

2.使内嵌支持宽高

3.换行被解析

4.不设置宽度的时候，由内容撑开

5.在IE6，7下不支持块标签

浮动：left/right/none

元素加了浮动后，会脱离文档流，按照指定的一个方向移动知道碰到父级的边界，或者另外一个浮动元素停止。

1.使块元素在一行显示

2.使内嵌支持宽高

3.不设置宽度的时候宽度由内容撑开

4.脱离文档流（*文档流：在文档中可显示对象在排列时所占用的位置）

5.提升层级半层（层级：类比楼房）// 浮的不够高，只够元素本身

clear样式：left/right/both/none 元素的某个方向上不能有浮动元素

清浮动

1.给父级也加浮动（不实用）

2.给父级加display：inline-block；（存在问题）？？

3.在浮动元素下加<div class="clear"></div>

clear｛height：0px；font-size：0；clear：both｝(在IE6下有最小高度的问题)

在IE6下高度小于19px的元素，高度会被当作19px处理。

解决办法： font-size：0；

4.在浮动元素下加<br clear="all">(改了结构)

**// 在IE6,7下浮动元素的父级有宽度就不用清浮动，

haslayout 根据元素内容的大小或者父级的父级大小来重新的计算元素的宽高

display：inline-block

height：（任何值除了auto）

width：（任何值除了auto）

float：（left 或 right）

zoom：（除了normal外任意值）**

5.给浮动元素的父级加｛zoom：1；｝

：after｛content：""; display: block ; clear: both ;｝***用这种！！！***

6.给浮动元素的父级加overflow（在IE6下存在问题）

overflow溢出

auto 溢出默认显示滚动条

scroll 默认就显示滚动条

hidden 溢出隐藏

浮动问题

在IE6,7下要并在同一行的元素都要加浮动

IE6下双边距BUG

在IE6下，块元素有浮动和横向的margin。横向的margin值会被放大成两倍

在IE6,7下l几px的间隙问题

在IE6,7下li本身没浮动，但是内容浮动了li下就会多出来几px

解决办法：

1，给li加浮动

2，给li加vertical-align：top；（可清理图片下的空隙）

在IE6下高度小于19px，高度会被当做19px来处理

解决办法：overflow：hidden

转载于:https://www.cnblogs.com/BBeyes/p/6530069.html

HTMLCSS学习笔记（四）----浮动原理及清浮动相关推荐

Sqlite学习笔记(四)SQLite-WAL原理（转）
Sqlite学习笔记(三)&&WAL性能测试中列出了几种典型场景下WAL的性能数据,了解到WAL确实有性能优势,这篇文章将会详细分析WAL的原理,做到知其然,更要知其所以然. WAL是 ...
华清远见fs4412开发板学习笔记(四)
fs4412开发板学习笔记(四) 今天的课程安排 1.复习 1.1 VIM 编辑器 [1] vim + filename 打开 [2] 工作模式命令模式编辑模式底行模式 [3] 模式切换命令- ...
Web前端入门学习（5）——浮动原理及清除浮动
浮动原理及清除浮动上节回顾在上节的<Web前端入门学习(4)-- 块级元素和行内元素之特征与转换>中(http://cherry360.blog.51cto.com/12176744/ ...
MySQL高级学习笔记(四)
文章目录 MySQL高级学习笔记(四) 1. MySql中常用工具 1.1 mysql 1.1.1 连接选项 1.1.2 执行选项 1.2 mysqladmin 1.3 mysqlbinlog 1.4 ...
【http学习笔记四】安全篇
[http学习笔记四]安全篇文章目录 [http学习笔记四]安全篇一.HTTPS 与 SSL/TLS ① 什么是安全? 机密性完整性身份认证不可否认 ② 什么是HTTPS? ③ SSL/TL ...
C#可扩展编程之MEF学习笔记(四)：见证奇迹的时刻
前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...
IOS学习笔记(四)之UITextField和UITextView控件学习
IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...
RabbitMQ学习笔记四：RabbitMQ命令（附疑难问题解决）
RabbitMQ学习笔记四:RabbitMQ命令(附疑难问题解决) 参考文章: (1)RabbitMQ学习笔记四:RabbitMQ命令(附疑难问题解决) (2)https://www.cnblogs. ...
JSP学习笔记(四十九)：抛弃POI，使用iText生成Word文档
POI操作excel的确很优秀,操作word的功能却不敢令人恭维.我们可以利用iText生成rtf文档,扩展名使用doc即可. 使用iText生成rtf,除了iText的包外,还需要额外的一个支持rt ...

HTMLCSS学习笔记（四）----浮动原理及清浮动

HTMLCSS学习笔记（四）----浮动原理及清浮动相关推荐

最新文章

热门文章