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

清除浮动：

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

<!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. hash模式与history模式

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  2. permission denied (publickey)问题的解决和向github添加ssh key

    使用ssh key这种方式进行clone ,pull github上面的项目,使用 git clone或者git pull origin master出现permission denied (publ ...

  3. SpringBoot整合ActiveMQ和开启持久化

    一.点对点 1.提供者目录展示 2.导入依赖 <dependency> <groupId>org.springframework.boot</groupId> &l ...

  4. python 类 - 继承

    继承 什么是继承? 编写类时,并非总要从空白开始.如果要编写的类是另一个现成类的特殊版本,可使用继承. 一个类继承另一个类时,将自动获得另一个类的所有属性和方法.现有的类称为父类,而新类称为子类. 子 ...

  5. WeChall_Prime Factory (Training, Math)Training: WWW-Robots (HTTP, Training)

    In this little training challenge, you are going to learn about the Robots_exclusion_standard.The ro ...

  6. Android Studio 学习笔记(二)：布局简介和xmlns说明

    初学Android Studio,是在b站看的教程视频,这里的笔记也是以其为基础的,个人强烈安利: [天哥]Android开发视频教程最新版 Android Studio开发 Android 布局简介 ...

  7. MySQL中遍历查询结果的常用API（c）

    本中所使用的table: MySQL中的错误处理函数 unsigned int mysql_errno(MYSQL *mysql) const char *mysql_error(MYSQL *mys ...

  8. golang搭建一个简单的web服务器

    package main import ( "io/ioutil" "log" "net/http" ) func main() { htt ...

  9. Digital Twin 数字孪生

    GE的一个NB视频:http://v.youku.com/v_show/id_XMjk0NTMzODIyNA==.html http://www.gongkong.com/news/201701/35 ...

  10. docker-enter 安装

    github : https://github.com/sequenceiq/docker-enter [root@localhost ~]# docker run --rm -v /usr/loca ...