前端之float的几种清除浮动方式

本节内容

  • 1.float清除方式1
  • 2.float清除方式2
  • 3.float清除方式3
  • 4.float清除方式4

1.float清除方式1

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .content{

            background: red;

        }

        .left{

            float: left;

            height: 200px;

            width: 200px;

            background: black;

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <div class="content">

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

    </div>

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

</body>

</html>

　　

在父div的下面div中设置clear:both方式，content的div没有被撑起来，高度还是0，但是下面的asdf排在了最下面，缺点是外部的div高度为0，则外部div的颜色属性无法展示出来。

2.float清除方式2

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .content{

            background: red;

        }

        .left{

            float: left;

            height: 200px;

            width: 200px;

            background: black;

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <div class="content">

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

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

    </div>

    <div>asdf</div>

</body>

</html>

　　

在所有浮动标签的最后一个标签后面加上一个空标签，里面的style设置为clear:both，这样就把父div撑起来了。但是如果想在父div中添加新的浮动标签将可能出现问题，因为append新元素进去之后，空标签可能就不在最后一个位置了。

3.float清除方式3

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .content{

            background: red;

        }

        .left{

            float: left;

            height: 200px;

            width: 200px;

            background: black;

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <div class="content" style="overflow: hidden">

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

    </div>

    <div>asdf</div>

</body>

</html>

　　

在父标签中设置style为overflow: hidden也能将父标签撑起来，hidden的含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之上的，可以把普通流元素+浮动元素想象成一个立方体。如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。

4.float清除方式4

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .content{

            background: red;

        }

        .left{

            float: left;

            height: 200px;

            width: 200px;

            background: black;

            border: 1px solid red;

        }

        .clearfix:after{

            content: ".";  /*设置内容，必须有内容，没有，则无法实现效果*/

            visibility: hidden;  /*将标签隐藏*/

            height:0;  /*设置标签的高度为0*/

            display: block;  /*设置标签为块级标签*/

            clear: both;  /*设置清除float浮动*/

        }

    </style>

</head>

<body>

    <div class="content clearfix">

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

        <div class="left"></div>

    </div>

    <div>asdf</div>

</body>

</html>

　　

第四种方式是在父标签上面建一个伪类，设置如上面那样，这样将能够撑起父div标签，并且动态在里面添加float标签将不会影响父标签的撑开。

推荐使用这种方式

前端之float的几种清除浮动方式的更多相关文章

  1. 第五篇：web之前端之float的几种清除浮动方式

    前端之float的几种清除浮动方式   前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.flo ...

  2. css浮动（folat），清除浮动（clear）（另加两种清除浮动方式，总共三种清除浮动方式）

    css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...

  3. HTML连载50-伪元素选择器、清除浮动方式五

    一.伪元素选择器 1.什么是伪元素选择器 伪元素选择器作用给指定标签的内容前面添加一个子元素,或者给指定标签的内容后面添加一个子元素. 2.格式: 标签名称::before{ 属性名称:值: } 给指 ...

  4. CSS3中三种清除浮动（float）影响的方式

    float是HTML中布局的一大关键,很多难题一旦用上float都能很愉快地解决.但是凡是好用的,也容易出错.比如当子元素都为float时,其父元素会受影响,或者偶尔会发现自己某个div的高度变成了0 ...

  5. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  6. css 关于浮动float的使用以及清除浮动

    float:none | left | right 默认值:none 适用于:所有元素 none:设置对象不浮动left:设置对象浮在左边right:设置对象浮在右边 当该属性不等于none引起对象浮 ...

  7. css 3种清除浮动方法

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

  8. css 盒模型 文档流 几种清除浮动的方法

    盒模型 1.box-sizing: content-box 是普通的默认的一种盒子表现模式 盒子大小为 width + padding + border   content-box:此值为其默认值,其 ...

  9. 7种清除浮动 （感觉br最好用然而我用的还是overflow）

    1.clear清除浮动(添加空div法) 在浮动元素下方添加空div,并给该元素写css样式: {clear:both;height:0;overflow:hidden;} 2.方法:给浮动元素父级设 ...

随机推荐

  1. 计算机程序的思维逻辑 (46) - 剖析PriorityQueue

    上节介绍了堆的基本概念和算法,本节我们来探讨堆在Java中的具体实现类 - PriorityQueue. 我们先从基本概念谈起,然后介绍其用法,接着分析实现代码,最后总结分析其特点. 基本概念 顾名思 ...

  2. python2.7 内置ConfigParser支持Unicode读写

    1 python编码基础 对应 C/C++ 的 char 和 wchar_t, Python 也有两种字符串类型,str 与 unicode: str与unicode # -*- coding: ut ...

  3. SharePoint2013 Set a custom application page as site welcome page

    本文主要介绍如何添加一个custom application page as site welcome page 1.首先创建一个sharepoint 2013 empty solution, add ...

  4. SQL Server 统计信息更新时采样百分比对数据预估准确性的影响

    为什么要写统计信息 最近看到园子里有人写统计信息,楼主也来凑热闹. 话说经常做数据库的,尤其是做开发的或者优化的,统计信息造成的性能问题应该说是司空见惯. 当然解决办法也并非一成不变,“一招鲜吃遍天” ...

  5. MapReduce和Spark写入Hbase多表总结

    作者:Syn良子 出处:http://www.cnblogs.com/cssdongl 转载请注明出处 大家都知道用mapreduce或者spark写入已知的hbase中的表时,直接在mapreduc ...

  6. 浏览器加载和渲染HTML的过程（标准定义的过程以及现代浏览器的优化）

    先看一下标准定义的浏览器渲染过程(网上找的): 浏览器打开网页的过程 用户第一次访问网址,浏览器向服务器发出请求,服务器返回html文件: 浏览器开始载入html代码,发现 head 标签内有一个 l ...

  7. JSTL标签 参考手册

    前言 ========================================================================= JSTL标签库,是日常开发经常使用的,也是众多 ...

  8. eclipse中Maven运行时报错： -Dmaven.multiModuleProjectDirectory system propery is not set. Check $M2_HOME environment variable and mvn script match.

    1.安装 Maven 如果需要使用到 Maven ,必须首先安装 Maven , Maven 的下载地址在 Apache Maven 中有,您也可以点击这里下载 zip ,tar.gz. 下载好 Ma ...

  9. web设计页面跳转的方法

    一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx"); 2. 利用url地址打 ...

  10. Delphi_02_Delphi程序的结构

    一.工程文件 program MultiUnit; {$APPTYPE CONSOLE} uses SysUtils, Unit1 in 'Unit1.pas'; begin //引用unit1中的变 ...