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

清除浮动：

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

<!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. Redis 通用方法 存储DataTable DataRow DataSet

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. 分享数百个 HT 工业互联网 2D 3D 可视化应用案例之 2019 篇

    继<分享数百个 HT 工业互联网 2D 3D 可视化应用案例>2018 篇,图扑软件定义 2018 为国内工业互联网可视化的元年后,2019 年里我们与各行业客户进行了更深度合作,拓展了H ...

  3. 时序数据库 Apache-IoTDB 源码解析之前言（一）

    IoTDB 是一款时序数据库,相关竞品有 Kairosdb,InfluxDB,TimescaleDB等,主要使用场景是在物联网相关行业,如:车联网.风力发电.地铁.飞机监控等等,具体应用案例及公司详情 ...

  4. Linux之时间同步操作

    Linux之时间同步操作 时间同步操作应用的命令 yum进行软件安装,软件安装过程中如遇到询问,一律选择y,ntp是时间同步命令 [root@localhost ~]# yum -y install ...

  5. Exchange2010安装指南

    安装流程参考下面的: https://jingyan.baidu.com/article/2c8c281d6893680008252a9c.html 安装环境:windows server 2008( ...

  6. python strip()方法使用

    描述 python strip() ,用于去除述字符串头尾指定字符(默认为空格或换行符)或字符序列. 注意:此方法只能去除头尾的空格或是换行符,不能去除中间的. 语法: str.strip([char ...

  7. 通过Python包来剪枝、蒸馏DNN

    用 Distiller 压缩 PyTorch 模型 作者: PyTorch 中文网发布: 2018年7月15日 5,101阅读 0评论 近日,Intel 开源了一个用于神经网络压缩的开源 Python ...

  8. [软件分享]Office Tool Plus,一个OFFICE 管理、下载、安装器

    转载自我的博客:https://blog.ljyngup.com 教程摘自官方教程. 出事与本人无关 官网:https://otp.landian.vip/zh-cn/ Office Tool Plu ...

  9. 10-SpringMVC04

    FreeMarker 1.入门案例 1. 导包:freemarker.jar 2. 需要创建模板文件的路径:src/main/resources/template 3. 创建一个模板对象:hello. ...

  10. golang-练习ATM

    package main import "fmt" var ( action int loop bool = true save_money int money int draw_ ...