1.通过父元素overflow:hidden,缺点：超出部分隐藏，不推荐使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <title></title>

    <style type="text/css">

        *{padding:0;margin:0;}

        .box{margin:50px;border:1px solid #ddd;overflow:hidden;}

        .left{float:left;}

        .right{float:right;}

    </style>

</head>

<body>

<div class="box">

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

   <div class="right">33</div>

</div>

</body>

</html>

效果：

方式2：添加空标签并设置clear:both，缺点是额外添加空标签，不推荐使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <title></title>

    <style type="text/css">

        *{padding:0;margin:0;}

        .box{margin:50px;border:1px solid #ddd;}

        .left{float:left;}

        .right{float:right;}

        .slot{clear:both;}

    </style>

</head>

<body>

<div class="box">

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

   <div class="right">33</div>

   <div class="slot"></div>

</div>

</body>

</html>

方式3：通过伪类添加，既不会隐藏超出部分，又不多空标签，推荐使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <title></title>

    <style type="text/css">

        *{padding:0;margin:0;}

        .box{margin:50px;border:1px solid #ddd;}

        .box:after{content:'';display:block;clear:both;}

        .left{float:left;}

        .right{float:right;}

    </style>

</head>

<body>

<div class="box">

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

   <div class="right">33</div>

</div>

</body>

</html>

css清除浮动方式总结的更多相关文章

  1. css清除浮动的方法汇总

    这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...

  2. 什么是CSS清除浮动？

    在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外 ...

  3. 【转】css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...

  4. css清除浮动float方法

    转载:http://www.cnblogs.com/ForEvErNoME/p/3383539.html 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的 ...

  5. css清除浮动float的几种方法

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度, ...

  6. CSS清除浮动方法总结

    什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高 ...

  7. 前端开发CSS清除浮动的方法有哪些？

    在前端开发过程中,非IE浏览器下,当容器的高度自动,并且容器内容中有浮动元素(float为left或right),此时如果容器的高度不能自适应内容的高度,从而使得内容溢出破坏整体布局,这种现象叫做浮动 ...

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

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

  9. css清除浮动大全共8种方法

    原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...

随机推荐

  1. 【笔记】Rancher2.1容器云平台新特性

    2018年10月6日,Rancher2.1版本正式发布.相比Rancher2.0版本,提供了许多新的特性: 1.支持集群和项目级别的硬件资源配额管理:2.支持3个节点的Rancher Server的管 ...

  2. Windows Server 2012 R2 英文版安装中文语言包教程

    Windows Server 是云操作系统的主要组成部分. 有了 Windows Server,再加上云操作系统内的开发者技术,您就可以构建现代业务应用程序. 现代业务应用程序通常涵盖内部部署资源和公 ...

  3. 三个水杯——java,广度优先搜索

    题目如下: 21-三个水杯 内存限制:64MB 时间限制:1000ms 特判: No通过数:51 提交数:137 难度:4 题目描述: 给出三个水杯,大小不一,并且只有最大的水杯的水是装满的,其余两个 ...

  4. Angular Js 与bootstrap， angular 与 vue.js

    今天突然接到电话, 问我他们的区别  虽然平时看了,但是没记住,凉凉是肯定的 总结一下: bootstrap不算是javascript框架,它只是一个前端的ui框架,然后有一些附带的js插件而已.an ...

  5. 举例说明$POST 、$HTTP_RAW_POST_DATA、php://input三者之间的区别

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 个人信息——头像更换（拍照或相册上传）~ 微信小程序

    微信小程序中 在用户信息中关于用户头像更换(拍照或相册上传)功能实现. 图像点击触发事件: <image src='{{personImage}}' bindtap='changeAvatar' ...

  7. nodeJs安装Vue-cli

    1,安装nodejs安装包,注意安装的路径 2,安装完成node,node有自带的npm,可以直接在cmd中,找到nodeJs安装的路径下,进行命令行全局安装vue-cli.(npm install ...

  8. win10php环境变量配置（xampp环境）

    我的电脑--属性(右键)--高级系统设置--环境变量--系统变量--Path--编辑 新建两条变量: 一个是xampp文件下的php文件,例如 C:\xampp\php 一个是xampp文件下的php ...

  9. Daily record-November

    November 11. I managed to grab her hand. 我抓到了她的手.2. He passed a hand wearily over his eyes. 他疲倦地用手抹了 ...

  10. js中的setTimeout和setinterval 用法说明

    setTimeout("countSecond()", 1000)://countSecond()是函数(方法) setTimeout 只执行一次函数,需要传递两个参数1是函数名, ...