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

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. HDU 5974 数学

    A Simple Math Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Ot ...

  2. Huge Mission

    Huge Mission Problem Description Oaiei is busy working with his graduation design recently. If he ca ...

  3. 宿命的PSS

    宿命的PSS 时间限制: 1 Sec  内存限制: 128 MB提交: 60  解决: 37[提交][状态][讨论版] 题目描述 最小生成树P.S.S在宿命的指引下找到了巫师Kismi.P.S.S希望 ...

  4. Django 1.10中文文档-执行查询

    Django 1.10中文文档: https://github.com/jhao104/django-chinese-doc 只要创建好 数据模型, Django 会自动为生成一套数据库抽象的API, ...

  5. HAProxy安装文档

    HAProxy安装文档 [toc][TOC] 一.环境说明 系统环境:CentOS Linux release 7.2.1511 (Core) 系统内核:3.10.0-327.el7.x86_64 软 ...

  6. MongoDB数据库的安装、配置和使用

    1.下载安装包   wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.4.7.tgz 2.解压安装包   tar -zxf mo ...

  7. Python实战之SocketServer模块

    文章出处:http://www.cnblogs.com/wupeiqi/articles/5040823.html SocketServer内部使用 IO多路复用 以及 "多线程" ...

  8. c#枚举 获取枚举键值对、描述等

    using System; using System.Collections.Generic; using System.Collections.Specialized; using System.C ...

  9. MySQL5.7以上Zip版官方安装文档(选译)

    前言 在windows上安装Zip版MySQL(选译) 学习mysql的朋友们会发现5.7+版本的mysql变得比以前难安装了许多(当然我们可以选择installer版本,但是这样总感觉对学习mysq ...

  10. win10 uwp 自定义控件 SplitViewItem

    本文主要是因为汉堡菜单里面列出的菜单很多重复的图标和文字,我把它作为控件,因为是随便写,可能存在错误,如果发现了,请和我说或关掉浏览器,请不要发不良言论. 我们使用汉堡菜单,经常需要一个 需要一个图标 ...