浅谈float浮动

时间：2022-08-30 21:19:06

float大概是css3以前网页布局里最常用的一个属性了，经常看到一言不合就浮动的代码，就一起来深入挖掘一下这个一半天使一半魔鬼的属性吧。

本文是读张鑫旭大神慕课网float视频后的一些总结及一些拓展用法，视频地址：http://www.imooc.com/learn/121。该视频初读很枯燥，认真读后会发现更枯燥。。。。。。不过遇到坑之后再去读就会发现良心视频，字字珠玑。闲话不多说，现在开始：

1.float的起源

　　浮动最初的设计是用来做文字的环绕效果的，这也是设计者想让我们做的东西。

2.float的参数

　　float属性的参数取值有三个：

　　left：表示元素浮动在左边。

　　right：表示元素浮动在右边。

　　none：对象不浮动，遵循标准文档流。

3.效果展示（以float：left为例，float：right的情况只是位置的不同）

<style>

div{

    height: 20px;

}

    .d1{

        width: 50px;

        background: hsl(100,50%,80%);

    }

    .d2{float: left;

        width: 100px;

        background: hsl(150,50%,80%);

    }

    .d3{

        width: 250px;

        height: 100px;

        background: hsl(10,50%,80%);

    }

    .d4{float: left;

        width: 300px;

        background: hsl(250,50%,80%);

    }

    span{

        margin-right: 3px;

        border-right: solid 1px #ccc;

        background-color: hsl(60,50%,80%);

    }

    .s3{

        float:left;

    }

</style>

<body>

<div class="d1">div1</div>

<div class="d2">div2有float</div>

<div class="d3">div3</div>

<span class="s1">span1</span>

<span class="s2">span2</span>

<span class="s3">span3有float</span>

<div class="d4">div4有float</div>

<span class="s4">span4 </span>

</body>

　　当浏览器宽度不够长时：

浅谈float浮动

　　当浏览器宽度足够长时：

浅谈float浮动

　　我们可以得出以下几个结论：

当浮动元素为块状元素时，他的下一个紧邻元素（不浮动）是块状元素时会与该浮动元素发生重叠，该浮动元素会在上方。如果下一个紧邻元素为内联元素时会紧跟该浮动元素。

当浮动元素为内联元素时，他的下一个紧邻元素（不浮动）是块状元素时不会移动，但宽度不够也会发生重叠。如果下一个紧邻元素为内联元素时会紧跟该浮动元素。

4.浮动的破坏性

　　设置了float的元素会脱离文档流，会导致其父元素出现高度“坍塌”。

<div style="border:3px dashed #ddd">

    <p>我还没设置float属性</p>

</div>

浅谈float浮动

<div style="border:3px dashed #ddd">

    <p style="float:left">我设置了float属性</p>

</div>

浅谈float浮动

5.浮动的包裹性

　　这是没有float的div

浅谈float浮动

　　这是个带有float的div

浅谈float浮动

6.浮动去空格

　　这个已经在上面代码和结论中中有所展示，简单来说就是正常文档流中两个内联元素之间以及上下会默认有一段缝隙，而浮动可以清除这个缝隙，让两个元素无缝结合，也会清除上下之间的缝隙。

浅谈float浮动

7.清除浮动的影响

　　7.1 使用clear属性

　　a.将<div style="clear:both;"></div>放到当作最后一个子标签放到父标签那儿，也是最简单的清除浮动的方法，但是不推荐。

<div style="border:3px dashed #ddd">

    <p style="float:left">我设置了float属性</p>

    <div style="clear:both"></div>

</div>

　　浅谈float浮动

　　b.after伪元素和zoom

　　after，就是指标签的最后一个子元素的后面。因此我们可以用CSS代码生成一个具有clear属性的元素

<style>

.mydiv{

        border:3px dashed #ddd

    }

    .mydiv:after{

        content: "";

        clear:both;

        display: block;

    }

</style>

<body>

<div class="mydiv">

    <p style="float:left">我设置了float属性</p>

</div>

</body>

浅谈float浮动

但是ie6/7无法识别伪元素after，就得用zoom方式，例：

.mydiv{

        border:3px dashed #ddd;
　　　　　zoom:1

    }
　　7.2 BFC
给父元素添加浮动，或者overflow:hidden,position:absolute等可以使元素BFC化的属性，下节单独探讨BFC的生成条件和布局规则，例：
<style>

    .mydiv{

        border:3px dashed #ddd;

        overflow: hidden;

    }

</style>

<body>

<div class="mydiv">

    <p style="float:left">我设置了float属性</p>

</div>

</body>

浅谈float浮动

关于float的布局以及清除影响就先到这了，有遗漏和错误的地方欢迎指正，下节来一起看看BFC到底是什么，他是如何布局的，为什么可以用来清除浮动。

BFC化清除浮动：

http://www.cnblogs.com/wangxiaosan/p/5986072.html

　　

浅谈float浮动的更多相关文章

  1. 浅谈CSS浮动属性

    要介绍css的float浮动属性,就必须先了解一下标准文档流 标准文档流:   在没有css的干预下,块级元素独占一行,可以设置宽高,行内元素并排显示,宽高自动填充.   HTML页面的标准文档流(默 ...

  2. 女屌丝前端逆袭记（一）之浅谈float

    提到前端,相信作为开发者的你或是正在看这篇文章的你并不陌生.前端可以说是直接与用户打交道的一个端口,不论是页面前端亦或是后端界面的前端,都是直接与用户对接的,因此前端设计对于一个网站或管理系统,都是至 ...

  3. 【css】浅谈BFC

    定义: 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. BFC的布 ...

  4. BFC 浅谈

    写在前面 Block formatting context (块级格式化上下文) 页面文档由块block构成 每个block在页面上占据自己的位置使用新的元素构建BFC overflow:hidden ...

  5. 浅谈Java中的equals和&equals;&equals;&lpar;转&rpar;

    浅谈Java中的equals和== 在初学Java时,可能会经常碰到下面的代码: 1 String str1 = new String("hello"); 2 String str ...

  6. 浅谈Java中的equals和&equals;&equals;

    浅谈Java中的equals和== 在初学Java时,可能会经常碰到下面的代码: String str1 = new String("hello"); String str2 = ...

  7. 浅谈c语言结构体

    对于很多非计算机专业来说,c语言课程基本上指针都不怎么讲,更别说后面的结构体了.这造成很多学生对结构体的不熟悉.这里我就浅谈一下我对结构体的认识. 结构体,就是我们自己定义出一种新的类型,定义好之后, ...

  8. 安卓开发&lowbar;浅谈Android动画（四）

    Property动画 概念:属性动画,即通过改变对象属性的动画. 特点:属性动画真正改变了一个UI控件,包括其事件触发焦点的位置 一.重要的动画类及属性值: 1.  ValueAnimator 基本属 ...

  9. 浅谈Java中的深拷贝和浅拷贝（转载）

    浅谈Java中的深拷贝和浅拷贝(转载) 原文链接: http://blog.csdn.net/tounaobun/article/details/8491392 假如说你想复制一个简单变量.很简单: ...

随机推荐

  1. 最新一代文件结构 超高性能解析IP数据库 qqzeng-ip&period;dat

    高性能IP数据库格式 qqzeng-ip.dat 编码:UTF8           字节序:Little-Endian 返回多个字段信息(如:亚洲|中国|香港|九龙|油尖旺|新世界电讯|810200 ...

  2. jQuery get post 碎片（远程html）加载

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. reset&period;css（详细说明）

    @charset "utf-8";/************************************************************************ ...

  4. 解决：getWeatherbyCityName&lpar;city&rpar;，服务器无法处理请求。 ---&gt&semi; 未将对象引用设置到对象的实例。

    原文:getWeatherbyCityName(city),服务器无法处理请求. ---> 未将对象引用设置到对象的实例. 解决方法:不要直接使用 “服务引用” , 添加为 “Web 引用” 最 ...

  5. Android之万能播放器解码框架Vitamio的介绍及使用

    一.简介 Vitamio能够流畅播放720P甚至1080P高清MKV,FLV,MP4,MOV,TS,RMVB等常见格式的视频,还可以在Android 与 iOS 上跨平台支持 MMS, RTSP, R ...

  6. java 解决时间相减问题

    比如 Date currentTime ="2011-06-20 9:23:50"; Date endTime="2011-06-21 10:33:56"; 要 ...

  7. nsi脚本中执行&period;bat文件要隐藏dos窗口问题

    问题原因:工作中,在一个nsi的安装脚本文件中需要安装虚拟摄像头驱动,安装驱动脚本是.bat文件.使用nsi的execwait函数执行.bat文件时会显示dos窗口.但是领导要求不能显示dos窗口. ...

  8. IOS Xib使用——Xib表示局部界面

    Xib文件是一个轻量级的用来描述局部界面的文件,在之前的文章讲解了为控制器添加Xib文件,本节主要讲解一下通过xib文件表示局部界面. <一> 创建Xib文件 Xib文件创建的时候是选择U ...

  9. GitHub从注册到使用

    GitHub是最流行的代码库,里面存储着丰富的优秀的开源代码,不仅如此,作为一款免费的代码存储利器也是很牛逼,支持各种编程语言,代码显示效果堪称完美,可以随时随地查看自己记录的笔记 GitHub的好处 ...

  10. mysql 创建表时注意事项

    mysql  创建表时注意事项 mysql 想必大家都不会陌生吧  是我学习中第一个接触的的数据库 已学习就很快上手的   这是一个关系型数据库  不懂什么是关系型数据库 啊哈哈哈  现在知道啦  因 ...

相关文章