浮动的原本作用仅仅是为了实现文字的环绕效果。

以下分别是html与css代码,显示效果如下图。因为两个div使用了float浮动属性,所以脱离了标准文档流。让父元素撑开高度,我们需要清除浮动。

<div class="box">
<div class="box-left">我是left-box</div>
<div class="box-right">我是right-box</div>
</div>
.box{
width: 600px;
margin:50px auto;
border:1px solid #f00;
padding:10px;
background: #;
}
.box-left,.box-right{
width: 200px;
height: 150px;
border:2px solid #fff;
background: #;
}
.box-left{
float: left;
}
.box-right{
float: right;
}

一共有两种方法——

1.在类为"box"的结束标签中加一个空div,并设置样式——<div style="clear:both"></div>

2.使用css伪类after——

after顾名思义是在元素后面的意思,实质是在元素之后添加内容。

这个伪元素允许制作人员在元素内容的最后面插入生成内容,需要和content属性一起使用,设置在对象后发生的内容。默认地,这个伪元素是inline行内元素,这里我们使用属性 display 改变这一点。

PS:所有主流浏览器都支持 :after 伪元素,但对于IE来说,只有IE8以上版本支持。

{*zoom:1}属于IE浏览器的专有属性。(支持IE6和IE7)

.clearfix必须定义在包含浮动子元素的父级元素上!!!!


深入剖析——float之个人见解的更多相关文章

  1. 【解惑】剖析float型的内存存储和精度丢失问题

    问题提出:12.0f-11.9f=0.10000038,"减不尽"为什么? 现在我们就详细剖析一下浮点型运算为什么会造成精度丢失? 1.小数的二进制表示问题 首先我们要搞清楚下面两 ...

  2. float的深入剖析

    float的深入剖析   float是什么? float即为浮动,在html中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”.下面解释下这个定义中的几个名词的概念: 文档流 ...

  3. Java Float类型 减法运算时精度丢失问题

    package test1; public class Test2 { /*** @param args*/public static void main(String[] args) {   Flo ...

  4. java浮点数存储

    转自: [解惑]剖析float型的内存存储和精度丢失问题 1.小数的二进制表示问题 首先我们要搞清楚下面两个问题: (1)  十进制整数如何转化为二进制数 算法很简单.举个例子,11表示成二进制数: ...

  5. 关于Java中2.0-1.1!=0.9的问题

    关于Java中2.0-1.1!=0.9的问题 问题引出: 在<Java核心技术>中关于浮点数值计算部分提到,System.out.println(2.0-1.1)这条语句并不是想当然的0. ...

  6. Java:利用BigDecimal类巧妙处理Double类型精度丢失

    目录 本篇要点 经典问题:浮点数精度丢失 十进制整数如何转化为二进制整数? 十进制小数如何转化为二进制数? 如何用BigDecimal解决double精度问题? new BigDecimal(doub ...

  7. js实现省市区联动

    先来看看效果图吧,嘻嘻~~~~~~~~~~~~~~~~~~~· 代码在下面: 示例一: html: <!DOCTYPE html> <html> <head> &l ...

  8. float与double剖析

    今天研究下float与double的编码 float: 我们来看一下这组数是如何一步步从16进制转换到float的 float编码格式: 1.将16进制转换到2进制 整理后:0 1000 0010 1 ...

  9. 计算机程序的思维逻辑 (30) - 剖析StringBuilder

    上节介绍了String,提到如果字符串修改操作比较频繁,应该采用StringBuilder和StringBuffer类,这两个类的方法基本是完全一样的,它们的实现代码也几乎一样,唯一的不同就在于,St ...

随机推荐

  1. 【Android 界面效果45】ViewPager源码分析

    ViewPager概述: Layout manager that allows the user to flip left and right through pages of data. You s ...

  2. .NET中的Queue和Stack

    1.ArrayList类 ArrayList类主要用于对一个数组中的元素进行各种处理.在ArrayList中主要使用Add.Remove.RemoveAt.Insert四个方法对栈进行操作.Add方法 ...

  3. You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '

    mysql中如果字段使用了关键字,在插入和更新时会提示 You have an error in your SQL syntax; check the manual that corresponds ...

  4. 利用css使文本在限制几行之后隐藏

    想要在布局中显示一段新闻的标题或是内容,特别是内容,东西超多...下面的方法就是通过css来控制文本显示多少的: 首先在html中写上: <p class="ellipsis" ...

  5. Macbook之安装opencv

    link:http://www.mobileway.net/2015/02/14/install-opencv-for-python-on-mac-os-x/

  6. Android 混淆与混淆过滤

    Android 中代码混淆一般用的是ProGuard.它除了混淆代码之后还有其它许多实用的功能.这里主要记录混淆相关的实现. 1.ProGuard的作用 删除无用代码,压缩和优化Class文件,缩小A ...

  7. phpmailer使用163邮件发送邮件例子

    注意:如果你的服务器安装了卖咖啡并且开户病毒最大防护功能我们需要关闭一个邮件防护哦,否则你的邮件发不出去给被这款杀毒给拦截哦. 1. 使用gmail发送的脚本 代码如下 复制代码 include(&q ...

  8. dedecms5.7文章实现阅读全文功能二次开发

    阅读全文功能其实在很多的流行站点都有的,比如网易,新浪等,随着文章内容的增加,当一个页面有多个分页的时候,就会显示出这个“在本页阅读全文”的链接,点击这个链接之后,出现的,将是这篇文章以没有分页出现的 ...

  9. 复习IOS多线程知识

    线程的注意点 1.不要同时开太多的线程(1~3条线程即可,不要超过5条) 2.线程概念 * 主线程 : UI线程,显示.刷新UI界面,处理UI控件的事件 * 子线程 : 后台线程,异步线程 3.不要把 ...

  10. 一个简单的获取参数的jqure

    今天做项目的时候需要用到上一页面传递过来的参数(只要一个参数),其解决办法就是下面: char latter=location.search.split('=')[1] 以上直接获取到第一个参数的值为 ...