内容:

1.block与inline复习

2.float介绍

3.float作用

4.清除浮动

1.block与inline复习

  1. 1 block元素是独立的一块,独占一行
  2. 2 多个block元素会各自新起一行,默认block元素宽度自动填满其父元素宽度
  3. 3 block元素可以设置widthheightmarginpadding属性;
  4. 4
  5. 5
  6. 6 inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行
  7. 7 inline元素其宽度随内容而变化。inline元素设置widthheight属性无效
  8. 8 inline元素的marginpadding属性:
  9. 9 水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果
  10. 10 竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
  11. 11
  12. 12
  13. 13 常见的块级元素有 divformtableppreh1h5dlolul 等。
  14. 14 常见的内联元素有spanastrongemlabelinputselecttextareaimgbr

2.float介绍

什么是浮动:浮动核心就一句话,浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素。重要的事情请默念3次

浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示:

实现代码:

  1. HTML:
  2. <div class="float-test">
  3. <p>
  4. <img class="img-left" src="img/user.jpg" alt="用户头像" width="150px" height="150px">
  5. This is some text.This is some text.This is some text.This is some text.、、、
  6. </p>
  7. </div>
  8.  
  9. CSS:
  10. p{
  11. text-indent: 2em;
  12. }
  13. .img-left{
  14. float: left;
  15. margin-left: 7px;
  16. }

3.浮动作用

后来开发者发现浮动的元素可以设置宽高并且可以内联排列,是介于inlineblock之间的一个神奇的存在,在inline-block出来之前,浮动大行其道。直到inline-block出来后,浮动也有它自己独特的使用场景

浮动的特性总结如下:

  • 浮动会脱离文档
  • 浮动可以内联排列
  • 浮动会导致父元素高度坍塌

(1)浮动会脱离文档

浮动会脱离文档,也就是说浮动不会影响普通元素的布局;元素浮动之后会忽略其他元素浮动起来直到遇到父元素或已经浮动的元素,浮动的元素可能会盖住未浮动的元素如下所示:

(2)浮动可以内联排列

浮动会向左/向右浮动,直到碰到另一个浮动元素为止,这是浮动可以内联排列的特征。也就是说,浮动可以设置宽高,并且能够一行多个,是介于blockinline之间的存在,浮动内联排列如下所示:

(3)浮动会导致父元素高度坍塌

浮动是脱离文档流,父元素便无法控制浮动的元素,如果父元素中的子元素全部浮动将导致父元素高度坍塌,这个问题要通过清除浮动来解决

4.清除浮动

(1)clear语法

  1. 1 clear语法:
  2. 2 clear : none | left | right | both
  3. 3 取值:
  4. 4 none : 默认值。允许两边都可以有浮动对象
  5. 5 left : 不允许左边有浮动对象
  6. 6 right : 不允许右边有浮动对象
  7. 7 both : 不允许有浮动对象
  8. 8 但是需要注意的是:clear属性只会对自身起作用,而不会影响其他元素
  9. 9 如果一个元素的右侧有一浮动对象,而这个元素设置了不允许右边有浮动对象,即clearright,则这个元素会自动下移一格,达到本元素右边没有浮动对象的目的。

(2)清除浮动

给浮动的元素的父元素加上以下两段代码中任意一段即可:

  1. // 现代浏览器clearfix方案,不支持IE6/7
  2. .clearfix:after {
  3. display: block;
  4. content: " ";
  5. clear: both;
  6. }
  7.  
  8. // 全浏览器通用的clearfix方案
  9. // 引入了zoom以支持IE6/7
  10. .clearfix:after {
  11. display: block;
  12. content: " ";
  13. clear: both;
  14. }
  15. .clearfix{
  16. *zoom:;
  17. }
  18.  
  19. // 全浏览器通用的clearfix方案【推荐】
  20. // 引入了zoom以支持IE6/7
  21. // 同时加入:before以解决现代浏览器上边距折叠的问题
  22. .clearfix:before,
  23. .clearfix:after {
  24. display: block;
  25. content: " ";
  26. }
  27. .clearfix:after {
  28. clear: both;
  29. }
  30. .clearfix{
  31. *zoom:;
  32. }

float属性详解的更多相关文章

  1. CSS position overflow float 属性 详解

    position  overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...

  2. css float属性详解

    定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.如果浮动非 ...

  3. float 属性详解

    当前元素分类(float:left) 下一个紧邻元素分类(不含float) 结论 块级元素(a) 块级元素(b) b会填充a遗留下来的空间,a会和b发生重叠,a的图层在上面. 内联元素(b) b会紧跟 ...

  4. (转)ie -ms-interpolation-mode: bicubic 属性详解

    ie -ms-interpolation-mode: bicubic 属性详解  img { -ms-interpolation-mode: bicubic; } 这个在做实时缩放图片.缩略图的时候用 ...

  5. CSS2.1SPEC:视觉格式化模型之width属性详解(下)

    本文承接CSS2.1SPEC:视觉格式化模型之width属性详解(上),继续分析CSS视觉格式化模型中width以及相关值的计算问题: 注:与上节不同,本节的demo中由于出现了float,absol ...

  6. odoo项目结构参数属性详解

    1.基础文件及目录结构 在认识odoo ORM框架前,先介绍一下odoo中模块目录结构.   data:存放模块预制数据i18n:存放国际化文件models:存放模型等py代码security:存放权 ...

  7. C#类、对象、方法和属性详解

    C#类.对象.方法和属性详解 一.相关概念: 1.对象:现实世界中的实体(世间万物皆对象) 2.类:具有相似属性和方法的对象的集合 3.面向对象程序设计的特点:封装 继承 多态 4.对象的三要素:属性 ...

  8. z-index属性详解

    z-index属性详解 目录 z-index属性详解 一.定义和用法 二.代码 三.效果图 一.定义和用法 z-index属性指定一个元素的堆叠顺序,也就是z轴 position属性定义的是x轴和y轴 ...

  9. css 12-CSS3属性详解:动画详解

    12-CSS3属性详解:动画详解 #前言 本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation #过渡:transiti ...

随机推荐

  1. 【OpenCV】Learn OpenCV

    learn opencv website: https://www.learnopencv.com/ learn opencv github:https://github.com/spmallick/ ...

  2. CF1092(div3):Great Vova Wall (栈)(还不错)

    D1. Great Vova Wall (Version 1): 题意:给定长度为N的墙,以及每个位置的一些高度,现在让你用1*2的砖和2*1的砖去铺,问最后能否铺到高度一样. 思路:分析其奇偶性,在 ...

  3. WinForm 实现点击一个按钮,执行另一个按钮事件

    C# 代码如下: private void button1_Click(object sender, EventArgs e) { this.button1.Click += new System.E ...

  4. Alternative Thinking 找规律

    Kevin has just recevied his disappointing results on the USA Identification of Cows Olympiad (USAICO ...

  5. hdu2067 小兔的棋盘 DP/数学/卡特兰数

    棋盘的一角走到另一角并且不越过对角线,卡特兰数,数据量小,可以当做dp求路径数 #include<stdio.h> ][]; int main() { ; ) { int i,j; lon ...

  6. 重磅来袭,开源Asp.Net MVC网上商城BrnShop正式发布,提供源码下载(转)

    BrnShop网上商城是以Asp.Net mvc3为基础开发的网上商城,源代码完全开源(企业版的源代码目前还没有完全整理完成,一旦整理完成也全部开源). 啥话也不说了,直接上源码:下载源码(由于公司服 ...

  7. proc文件系统漫谈

    1. /proc/buddyinfo:/proc/buddyinfo是linuxbuddy系统管理物理内存的debug信息. 在linux中使用buddy算法解决物理内存的外碎片问题,其把所有空闲的内 ...

  8. ASP.NET MVC Area 的使用

    MVC提供Area机制,在同一个项目之内就能够切割出不同的ASP.NET MVC网站. 插入:首先在相同的位置,比如说同一个文件夹(如:Controllers)是不能创建俩个相同名称的文件(如:Hom ...

  9. Linux strace命令 一

    简介 strace常用来跟踪进程执行时的系统调用和所接收的信号. 在Linux世界,进程不能直接访问硬件设备,当进程需要访问硬件设备(比如读取磁盘文件,接收网络数据等等)时,必须由用户态模式切换至内核 ...

  10. sql distinct 去除重复的字段

    居然已经有人写了 那我就直接复制其链接吧