浮动元素会影响后边的元素，但不会影响前边的元素

清除浮动：

方法一：在浮动元素后面添加一个空元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box{

            width:100px;

            height:100px;

            background:#abcdef;

            float:left;

            border:1px solid;

        }

        .clear{

            clear:both;

        }

    </style>

</head>

<body>

    <div class="wrap">

        <div class="box"></div>

        <div class="box"></div>

    </div>

    <div class="clear"></div>

    <div class="last">

        last~

    </div>

</body>

</html>

方法二：

给浮动元素的父元素添加overflow:hidden;

再添加zoom:1; 兼容IE

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box{

            width:100px;

            height:100px;

            background:#abcdef;

            float:left;

            border:1px solid;

        }

        .wrap{

            overflow: hidden;

            zoom:1;

        }

        .clear{

            clear:both;

        }

    </style>

</head>

<body>

    <div class="wrap">

        <div class="box"></div>

        <div class="box"></div>

    </div>

    <div class="last">

        last~

    </div>

</body>

</html>

方法三：

使用css3的:after伪元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .clearfix{

            zoom:1;/*兼容IE*/

        }

        .clearfix:after{

            content:'';

            display: block;

            height:0;

            visibility: hidden;

            clear:both;

        }

        .box{

            width:100px;

            height:100px;

            background:#abcdef;

            float:left;

            border:1px solid;

        }

    </style>

</head>

<body>

    <div class="wrap clearfix">

        <div class="box"></div>

        <div class="box"></div>

    </div>

    <div class="last">

        last~

    </div>

</body>

</html>

float完成导航案例演示

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        /*重置样式*/

        *{margin:0;padding:0;}

        a{text-decoration: none;}

        ul{list-style:none;}

        /*基本样式*/

        .header{

            width:1120px;

            background:#ccc;

            margin:0 auto;

            overflow: hidden;

            zoom:1;

            padding:0 40px;

        }

        .logo{

            float:left;

            width:100px;

            height:68px;

        }

        .nav{

            float:right;

            overflow: hidden;

            zoom:1;

        }

        .nav li{

            float: left;

            margin-right:20px;

        }

        .nav li a{

            color:#333;

            display: block;

            height:68px;

            line-height:68px;

        }

        .nav li a:hover{

            color:#fff;

        }

    </style>

</head>

<body>

    <div class="header">

        <div class="logo">

            <a href="#"><img src="cat-little.jpg" alt="logo"></a>

        </div>

        <ul class="nav">

            <li><a href="#">导航1</a></li>

            <li><a href="#">导航2</a></li>

            <li><a href="#">导航3</a></li>

            <li><a href="#">导航4</a></li>

            <li><a href="#">导航5</a></li>

        </ul>

    </div>

</body>

</html>

float浮动以及案例演示的更多相关文章

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

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

  2. <转载>如何解决子级用float浮动父级div高度不能自适应的问题

    转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内 ...

  3. CSS清除float浮动

    一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在 ...

  4. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  5. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  6. CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动

    分组和嵌套  分组选择器 ——————>   嵌套选择器 能适用于选择器内部的选择器的样式 p{ }: 为所有 p 元素指定一个样式. .marked{ }: 为所有 class="m ...

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

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

  8. 给li设置float浮动属性之后，无法撑开外层ul的问题。（原址：http://www.cnblogs.com/cielzhao/p/5781462.html）

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

  9. float浮动问题：会造成父级元素高度坍塌；

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

随机推荐

  1. 理解RabbitMQ中的AMQP-0-9-1模型

    前提 之前有个打算在学习RabbitMQ之前,把AMQP详细阅读一次,挑出里面的重点内容.后来找了下RabbitMQ的官方文档,发现了有一篇文档专门介绍了RabbitMQ中实现的AMQP模型部分,于是 ...

  2. springboot之整合基本的jdbc并操作Mysql数据库

    对于数据访问层,无论是SQL还是NOSQL,springboot默认采用整合spring data方式进行统一处理,添加大量自动配置,屏蔽了许多设置,引入各种xxxTemplate,xxxReposi ...

  3. 如何运行使用gradle打包的项目

    目标:https://github.com/davenkin/springmvc4-helloworld 使用SpringMVC编写的一个HelloWorld程序. 初学Gradle只能一步步摸索前进 ...

  4. 使用Java封装一个DBUtils类（反射）

    刚开始学JavaWeb时,我是调用N个setter方法将从数据库中查询出的数据封装成JavaBean的,极其繁琐. 后来了解SpringJDBC后,发现它提供的接口非常简单,然后就想自己封装一个简单的 ...

  5. 软件质量保障初探_Chris

    关于软件质量保障的体会 首先,软件质量保障的重要性不言而喻,书中说软件质量体现在以下方面 软件开发过程的可见性 软件开发过程的风险控制 软件内部模块,项目中间阶段的交付质量,项目管理工具的因素 软件开 ...

  6. Affinity Propagation Demo1学习

    利用AP算法进行聚类: 首先导入需要的包: from sklearn.cluster import AffinityPropagation from sklearn import metrics fr ...

  7. MySQL的简介

    什么是数据库 1. 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数据库都有一个或多个不同 的API(接口)用于创建,访问,管理,搜索和复制所保存的数据 2. 我们也可以将 ...

  8. Mysql 删除从数据库的relay logs最佳方式、最安全方式

    情景 MySQL数据库主从复制在默认情况下从库的relay logs会在SQL线程执行完毕后被自动删除.但是:在relay_log_purge = 0和MHA集群下,不会被自动删除,需要手动删除.如何 ...

  9. Samba搭建Linux和Windows文件共享服务

    一.Samba简介 Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成.SMB(Server Messages Block,信息服务块)是一种在局域网上共享 ...

  10. [Redis-CentOS7]Redis哈希操作(五)

    哈希相当于下面Python代码 { "person":{ "name": "peigy", "age": "1 ...