loat有四个属性,分别是:

float:none;  没有浮动;

float:left;  左浮动;

float:right; 右浮动;

float:inherit;继承父元素的浮动;

------------------------

使用浮动:会脱离文档流,出现高度塌陷,浮动溢出的情况。

=====================================================

<style>
        .container{  //父元素宽高自适应
            border: 5px solid black;
        }
       .div1,.div3,.div2{
        width: 100px;
        height:100px;
       }
       .div1{
            background: red;
            float: left;
       }
       .div2{
            background: green;
            float: left;
       }
       .div3{
            background: pink;
            float: left;
       }
    </style>

<div class="container">
        <div class="div1">1111111</div>
        <div class="div2">222222222</div>
        <div class="div3">33333333333</div>
    </div>

========================================

使用浮动:会脱离文档流,出现高度塌陷,浮动溢出的情况。

如果在div3下面再添加一个div4,并且不设置float属性,

那么div4会填充前面3个div的位置。所以使用浮动后,这里我们都要使用清除浮动来处理浮动溢出的问题。

使用浮动的时候,子元素的浮动会导致父元素发生塌陷,因为子元素进行了浮动,脱离了标准流,使得父元素无法检测到子元素,导致父元素塌陷、没有高度;同理,因为浮动元素脱离了标准流,使得临近元素无法感知到浮动元素,使得普通元素占据浮动元素的位置,发生异位

inherit:继承。

none:不清除浮动,比较少用。

left:如果设置该值(正常上面都是已经设置了float:left),则让该元素向左浮动,即相对后面元素会跟这个这么元素的屁股后面按照正常文档流排列。

right:如果设置该值(正常上面都是已经设置了float:right),则让该元素向右浮动,即相对后面元素会跟这个这么元素的屁股后面按照正常文档流排列。

both:如果设置该值(正常上面都是已经设置了向左或向右浮动),则让该元素相应浮动,即相对前后面元素会跟这个这么元素的屁股后面按照正常文档流排列。

===============清除浮动的方法如下==================

<style type="text/css">

  .clearBoth{ clear:both; }

</style>

<div class="container">
        <div class="div1">1111111</div>
        <div class="div2">222222222</div>
        <div class="div3">33333333333</div>
        <div class="clearBoth"></div>   //一定要放在浮动的后面一个元素,放在父元素后面都没用。一定要紧跟最后一个浮动元素。
    </div>

<style type="text/css">

  .container{ overflow:hidden }

</style>

给浮动元素的父元素添加 overflow:hidden。overflow:hidden;除了清除浮动外,还可以使溢出的内容隐藏。

方法三如下代码:

---------------------

方法一

在浮动元素后面添加一个空的<div class="clearBoth"></div>

  .clearBoth{ clear:both; }

方法二

在浮动元素的父元素添加一个class="container"。

.container

{

  overflow:hidden;

  zoom:1;  ///兼容低版本IE6,7

}

在父元素添加这个类,即可实现浮动。

.clearfix:after{
            content: ".";
            height: 0;
            display: block;
            visibility: hidden;
            clear: both;
        }
        .clearfix{   ///是为了兼容I6,7 浏览器
            zoom:1;
        }

方法四:

只适合在子元素固定高度时才可以使用:即在父元素中定义它的高度。height=子元素最大的高度。

如上面例子,3个div的高度都是100px,那么我们就可以在父元素中直接定义 height:100px;即达到了清除浮动的效果。

方法五:

把浮动元素的父元素也添加浮动,然后在通过方法一,方法二进行清除浮动,不推荐,只做了解。

-------------------------------

简单的盒子使用 overflow:hidden;  zoom="1";

复杂的盒子使用css中的  .clearfix:after{} 来清除浮动。

float浮动的世界的更多相关文章

  1. 20190402-display展现、float浮动

    目录 1.display展现 dispaly:"none | block | inline | inline-block | list-item | run-in(主流浏览器不支持) | t ...

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

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

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

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

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

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

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

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

  6. float浮动深入理解

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

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

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

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

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

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

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

随机推荐

  1. Android开发 - 掌握ConstraintLayout(十一)复杂动画!如此简单!

    介绍 本系列我们已经介绍了ConstraintLayout的基本用法.学习到这里,相信你已经熟悉ConstraintLayout的基本使用了,如果你对它的用法还不了解,建议您先阅读我之前的文章. 使用 ...

  2. 脑残式网络编程入门(一):跟着动画来学TCP三次握手和四次挥手

    .引言 网络编程中TCP协议的三次握手和四次挥手的问题,在面试中是最为常见的知识点之一.很多读者都知道“三次”和“四次”,但是如果问深入一点,他们往往都无法作出准确回答. 本篇文章尝试使用动画图片的方 ...

  3. Javascript高级编程学习笔记(81)—— 富文本(1)

    富文本编辑 富文本编辑又称为: WYSIWYG(What You See Is What You Get,所见即所得) 常用于博客等用途,虽然没有规范,但是在IE最先引入后其他的浏览器厂商也相继完成了 ...

  4. Javascript高级编程学习笔记(31)—— BOM(5)screen、history对象

    screen对象 screen对象应该是BOM对象中最不常用的对象了 其主要用于提供客户端的显示能力信息 包括浏览器外部显示的信息,和像素的宽高等 这个对象的主要用于检测客户端能力,一般不会影响功能 ...

  5. Nginx 在 Linux 上的安装和配置

    一.Nginx的安装 1.单台Nginx的安装 Nginx在Linux上的安装可以参考这篇博客:http://blog.csdn.net/molingduzun123/article/details/ ...

  6. 第65节:Java后端的学习之Spring基础

    Java后端的学习之Spring基础 如果要学习spring,那么什么是框架,spring又是什么呢?学习spring中的ioc和bean,以及aop,IOC,Bean,AOP,(配置,注解,api) ...

  7. react中的refs

    概述 很久之前就知道refs,感觉好神秘,恰好今天突然发现字符串形式的ref在官网不推荐使用了,于是好好总结一下ref的用法,供以后开发时参考,相信对其他人也有用. 参考资料: Refs & ...

  8. 《你不知道的JavaScript(中卷)》读书笔记

    中卷有点无聊,不过也是有干货的,但是好像要背一下的样子.不过作者大大都夸我是“优秀的开发人员”了,肯定要看完呀~~ 开发人员觉得它们太晦涩,很难掌握和运用,弊(导致bug)大于利(提高代码可读性).这 ...

  9. Spring框架(1)---Spring入门

    Spring入门 为了能更好的理解先讲一些有的没的的东西: 什么是Spring Spring是分层的JavaSE/EE full-stack(一站式) 轻量级开源框架 分层 SUN提供的EE的三层结构 ...

  10. 自动测试工具(Jmeter,qtp等)

     loadrunner.Selenium.QTP三者区别?    Loadrunner是商业性能测试工具,收费,功能强大,适合做复杂场景的性能测试.  Selenium是开源的web自动测试工具,免费 ...