比如说,有一个div,我想在左侧和右侧各方一个元素。

如果不想用flex,那就只能用浮动了。

...
<div class="up clearfix">
<h6>用户添加</h6>
<div class="float right">
<Button >新增</Button>
</div>
</div>
...

咋一看并没有问题,对不对?

但是这样不行:想挂在右侧的那个元素会被挤下去。

只要把浮动元素放在非浮动元素前面就行了。

...
<div class="up clearfix">
<div class="float right">
<Button >新增</Button>
</div>
<h6>用户添加</h6>
</div>
...

就是这样。

css : 使用浮动实现左右各放一个元素时很容易犯的错误的更多相关文章

  1. jquery 实现重复点击一个元素时不重复执行效果

    jquery 实现重复点击一个元素时不重复执行效果 这需要用到jquery的stop方法 实例 停止当前正在运行的动画: $("#stop").click(function(){ ...

  2. [css]《css揭秘》学习(四)-一个元素实现内圆角边框

    如图所示的圆角边框有两个元素很好实现,用一个元素也可以实现. <html> <head> <meta charset="utf-8"> < ...

  3. css系列(布局):实现一个元素在浏览器中水平、垂直居中的几个方案

    在开发中偶遇需要一个元素垂直居中的需求,之前都是水平居中,垂直居中使用的比较少,经过一通研究,选择了几种相对比较实用的方案分享,抛砖引玉,如有遗漏不足,还望不吝指正. 方案一(IE7下该方案无法实现垂 ...

  4. CSS样式----浮动(图文详解)

    标准文档流 宏观地讲,我们的web页面和photoshop等设计软件有本质的区别:web页面的制作,是个"流",必须从上而下,像"织毛衣".而设计软件,想往哪里 ...

  5. css之浮动

    标准文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 标准流的微 ...

  6. CSS的浮动(float)

    问题:在练习过程中,发现div1浮动后,它下面的div被覆盖住了. 解决方案:清除该div1的浮动. 关于CSS的浮动 1.div是块级元素,独占一行 2.浮动可以理解为让某个div元素脱离标准流,漂 ...

  7. 详说 CSS 清除浮动

    转自:http://kayosite.com/remove-floating-style-in-detail.html 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生 ...

  8. CSS布局--浮动与清除

    浮动和清除 浮动和清除是页面布局的重要属性.浮动的意思是指将元素从常规的文档流中取出来. 当你浮动一个元素的时候,浮动的元素会被浏览器尽量的往上放,能放多高就放多高,一直到某个元素的边界为止. 浮动元 ...

  9. 第五节 HTML&CSS -- 关于浮动和清除浮动的解说,以及两个大坑不要踩

    1.随便唠叨几句   这一节课我会对浮动元素和怎样清除浮动相关的技术进行一个讲解,同时,我会列举一些我们前端开发中常见的坑,希望大家以后不要在这些地方犯错.在开始今天的课程之前,有一个东西我需要先讲一 ...

随机推荐

  1. Java学习笔记5(API)

    Java API API(Application Programming Interface)指的是应用程序编程接口. String类 String初始化有两种,一个是使用字符串常量初始化一个Stri ...

  2. HttpClient优化

    HttpClient优化思路: 1.池化 2.长连接 3.httpclient和httpget复用 4.合理的配置参数(最大并发请求数,各种超时时间,重试次数) 5.异步 6.多读源码 1.背景我们有 ...

  3. Office2019 相关激活秘钥

    零售版 W8W6K-3N7KK-PXB9H-8TD8W-BWTH9 批量板 N9J9Q-Q7MMP-XDDM6-63KKP-76FPM

  4. 入门大数据---通过Flume、Sqoop分析日志

    一.Flume安装 参考:Flume 简介及基本使用 二.Sqoop安装 参考:Sqoop简介与安装 三.Flume和Sqoop结合使用案例 日志分析系统整体架构图: 3.1配置nginx环境 请参考 ...

  5. 使用Apache Hudi构建大规模、事务性数据湖

    一个近期由Hudi PMC & Uber Senior Engineering Manager Nishith Agarwal分享的Talk 关于Nishith Agarwal更详细的介绍,主 ...

  6. 面试官:你精通多少种语言的 Hello World?

    Hello World,是程序员入门编程语言的第一课.不论是C.C++还是Java ,我们写的第一个程序就是它了,还记得小编在大一C语言课上,花了一整节课时间才把它打印到控制台上.万事开头难啊,相信看 ...

  7. C# 接口(interface) 抽象类(abstract)

    类代码: interface Employee { void ShowEmp(); } abstract class EmployeeInPostion: Employee { public abst ...

  8. SQL Server 索引的含义和特点

    索引用于快速找出在某个列中某一特定值的行.不使索引,数据库必须从第一条记录开始读完整个表,直到找到相关行.如果表中查询的列有一个索引,数据库能快速到达一个位置去搜寻数据,而不必查看所有数据. 索引的含 ...

  9. github Pull Request合入全流程介绍

    图解全流程 详细步骤 1. fork仓库 2. clone fork仓库到本地 3. 关联upstream原仓库 在fork本地仓库输入下面命令进行关联: git remote add upstrea ...

  10. linux terminal---EOF

    we can use cat and eof to enter multiple lines content once.