浮动最开始的目的是为了让文字环绕图片(一个图片和多行文字对齐)
 

1、包裹性:元素添加 float 属性之后 自动变成 inline-block 元素,能设置 宽高

2、破坏性:破坏自身高度,还会使父元素没有了高度,因为里面元素没有了高度
 
在css中高度有两个模型产生
1、Box 模型    margin+padding+height
2、line  box模型    line-height    (line box 的高度等于里面最高 inline box 的高度)
 
 
去除浮动影响方法很多
1  给父元素添加一个包裹属性   例如overflow:hidden; position:absolute; display:inline-block; float:left; zoom:1等    (overflow:hidden最常用
2  浮动元素后添加<div style="clear: both;"></div>    //clear只会影响自身,float会影响周围的元素
 
 
清除浮动
.group:after {
content: ' ';
display: block;
clear: both;
height: 0;
visibility: hidden;
}
* html .group             { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */
 
或者:
.group:before, .group:after {
    content: "";
    display: table;
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
 
只考虑IE8及以上
.group:after {
  content: "";
  display: table;
  clear: both;
}

float 浮动的更多相关文章

  1. 给li设置float浮动属性之后,无法撑开外层ul的问题。

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  2. 给li设置float浮动属性之后,无法撑开外层ul的问题。(原址:http://www.cnblogs.com/cielzhao/p/5781462.html)

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  3. float浮动问题:会造成父级元素高度坍塌;

    float浮动问题:会造成父级元素高度坍塌: 解决办法:清除浮动:clear:both; 给父元素高度:height(不是很可取) 给父元素:display:inline-black:(问题:marg ...

  4. 解决float浮动带来的父元素高度没有的问题---清除浮动

    float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...

  5. float浮动深入理解

    [CSS深入理解之float浮动]听课总结 (http://www.imooc.com/learn/121)   1.float的原本作用:为了实现文字环绕 2.float的包裹性和破坏性: 包裹性: ...

  6. 【转】CSS清除浮动_清除float浮动

    CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...

  7. 对css float 浮动的学习心得

    css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...

  8. float浮动之后高度自适应失效解决方案

    float浮动之后高度自适应失效解决方案 >>>>>>>>>>>>>>>>>>>> ...

  9. [转] CSS float 浮动属性

    http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...

  10. CSS清除浮动_清除float浮动

    2.clear:both清除浮动为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“</div>”结束前加此di ...

随机推荐

  1. SyntaxError: (unicode error) 'unicodeescape' codec can't decode bytes in position 2-3: truncated \UXXXXXXXX escape

    "F:\program files (x86)\Python35\python.exe" "F:/program files (x86)/JetBrains/Seleni ...

  2. java编程基础复习-------第二章

    一.标识符 java中标识符的命名规则: 以数字.字母.下划线和$符号组成:不能用数字开头:不能是java的关键字. 注意:不要用$命名标识符.习惯上,$只用在机器自动产生的源代码中. 二.关键字 1 ...

  3. JAVA HashMap 解析

    1.简介(其实是HashMap注释的大致翻译) 本文基于JDK1.8,与JDK1.7中的HashMap有一些区别,看官注意区别. HashMap实现了Map接口,提供了高效的Key-Value访问.H ...

  4. Ubuntu16.04.1安装JDK1.8.0

    今天在安装Zookeeper的时候需要安装JDK,对于.Neter来说还是有点陌生,下面我就把安装JDK的步骤记录一下,分享给大家. 一.下载JDK安装包:http://www.oracle.com/ ...

  5. JS中var和let

       前  言 JavaScript 大家都知道声明一个变量时,通常会用'var'来声明,但是在ES6中,定义了另一个关键字'let'.今天我就为大家带来'var'与'let'这两个关键字声明有何异同 ...

  6. Python操作csv文件

    1.什么是csv文件 The so-called CSV (Comma Separated Values) format is the most common import and export fo ...

  7. CSS3D模型

    html部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  8. java web 学习总结之 Servlet/JSP 编码问题

    Servlet和JSP编码问题 字节流: 1.得到OutputStream  字节流 OutputStream os = response.getOutputStream();   用默认编码输出数据 ...

  9. sqlserver 使用脚本创建Sql Server代理作业

    use master GO /* --开启sql server代理 sp_configure 'show advanced options', 1; GO RECONFIGURE; GO sp_con ...

  10. 胡小兔的OI日志3 完结版

    胡小兔的 OI 日志 3 (2017.9.1 ~ 2017.10.11) 标签: 日记 查看最新 2017-09-02 51nod 1378 夹克老爷的愤怒 | 树形DP 夹克老爷逢三抽一之后,由于采 ...