比如说,有一个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. demo的自动化测试框架设计

    [准备环境] pycharm [思路] Python+request+unittest+HTMLTestRunner 框架 框架的可读性需要强 公共方法提取 可变参数需要提取放入配置文件 做好日志记录 ...

  2. dart快速入门教程 (1)

    1.环境搭建 1.1.dart简介 Dart 是一种 易于学习. 易于扩展.并且可以部署到 任何地方 的 应用 编程 语言.Google 使用 Dart 来开发 大型应用.flutter使用dart语 ...

  3. js语法基础入门(4)

    4.运算符 4.1.什么是运算符? 运算符就是用来表示具体运算规则的符号,例如数学计算中的加减乘除就是具体的运算规则,我们分别用"+ - * /"等符号来表示 4.2.运算符的分类 ...

  4. jmeter跨线程组获取cookie或jmeter线程组共享cookie-笔者亲测

    一.Jmeter版本 此次示例采用的是apache-jmeter-5.2.1版本 二.设置配置文件使Cookie管理器保存cookie信息. 修改apache-jmeter-5.2.1/bin/jme ...

  5. JavaScript笔记- 函数声明和函数表达式(001)

    function 是 Javascript 中的第一类对象,这就意味着函数可以像其他值一样被传递.一个最常见的用法就是将一个匿名函数作为回调函数传递到另外一个异步函数中. 函数声明 ? 1 funct ...

  6. 《算法笔记》9.4小节 问题 B: 二叉搜索树

    这道题也当做二叉搜索树的建树模板. 这道题其实直接把这颗树建出来后,比较前序序列和中序序列即可,这里我用的数组实现,更好写和查错qwq. code: #include <bits/stdc++. ...

  7. 三.接收并处理请求参数与QueryDict对象

     一.get与post请求:重点看传参与接收参数 GET请求与传参   ---->url后面跟上?k1=v1&&k2=v2 POST请求与数据提交 (1)get请求:如直接在浏览 ...

  8. lodash - slice

    稀疏数组和密集数组 稀疏数组 Sparse arrays 一般来说,JavaScript 中的数组都是稀疏数组-它们可以拥有空槽,所谓空槽,指的就是数组的某个位置没有任何值,既不是 undefined ...

  9. LeetCode-Stack-Easy

    简单题 1. 有效的括号(leetcode-20) 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 1. 左括号必须用相同类型的右括 ...

  10. c语言学习笔记第二章———入门

    B站有视频演示 2.1软件安装 推荐软件 1.dev-c++ 下载链接:(腾讯软件管家的下载地址) https://sm.myapp.com/original/Development/Dev-Cpp_ ...