若元素没有设置宽高，那元素实际宽高是被内容撑起来，

若元素自己有设置宽高，那实际面积于自己的盒子模型有关

1、清除浮动的本质

清除浮动主要是为了解决父级元素因为子级浮动而引起的内部高度为0的问题。

（当父元素没有设置高度时，子元素又全浮动了，此时子元素脱离文档流而不占据位置，那就会出现父元素高度为0底下的盒子会跑上来。）

2、清除浮动的方法

a、额外标签法（很少用，不想添加下无意义的标签）

b、父级添加overflow方法（overflow：hidden）

c、利用after伪元素清除浮动

注意：清除浮动设置的那些  height visiblity  都是为了隐藏那个小点。（content：“ .”）

d、双伪元素清除浮动（最推荐，工作中常用）

css学习_css清除浮动的更多相关文章

  1. css用clearfix清除浮动

    本文从http://www.studyofnet.com/news/196.html复制.   本文导读:写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,在Fire ...

  2. CSS学习系列2 -- CSS中的清除浮动

    CSS中有一个很常见的问题,就是元素的浮动. 那么,到底什么是元素的浮动呢,我们来看一个例子 举个例子,在一个div里面内部有浮动元素的话,这个浮动元素会让这个div的高度塌陷. .myDiv{ ba ...

  3. 【css学习整理】浮动,清除

    css内边距属性: padding padding-top right bottom left 如果是两个数字,指的是上下,左右 padding: 10px 20px  上下10  左右20 如果是三 ...

  4. ife任务刷题总结（一）－css reset与清除浮动

    本文同时发布于本人的个人网站www.yaoxiaowen.com 百度创办的前端技术学院,是一个面向大学生的前端技术学习平台.虽然只有大学生才有资格报名,提交代码进行比赛排名.但是这并不妨碍我们这些初 ...

  5. CSS学习笔记08 浮动

    从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...

  6. 【CSS学习】--- float浮动属性

    一.前言 浮动元素以脱离标准流的方式来实现元素的向左或向右浮动,并且浮动元素还是在原来的行上进行浮动的.float浮动属性的四个参数:left:元素向左浮动:right:元素向右浮动:none:默认值 ...

  7. [转]CSS clear both清除浮动

    DIV+CSS clear both清除产生浮动 我们知道有时使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,我们就用clear样式属性即可实现. 接下来我们来认识与学习cs ...

  8. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  9. CSS clear both清除浮动总结

    我们知道有时候使用了CSS float浮动,会产生CSS浮动,这个时候就需要清理浮动,我们就用clear样式属性即可实现. 接下来我们来认识与学习CSS clear知识与用法. clear清除浮动目录 ...

随机推荐

  1. cookie 跨域解决方法

    1.Nginx 正向和反向代理的区别 正向代理和反向代理的区别:正向代理隐藏真实客户端,反向代理隐藏真实服务端,图示: 2.cookie跨域问题 因为cookie存在跨域问题,其中一个解决方法是,设置 ...

  2. Ubuntu18.04下可以完美运行Quake3 Arena

    安装 其实很早就知道Linux下面可以跑Quake3, 但是一直没有付诸行动, 在硬盘上躺了很多年的Quake III Arena, 和Brood一起从来不舍得删, 昨天终于想起来试试. 安装很简单, ...

  3. 说说Python编码规范

    前言 已有近两个月没有发表过文章了,前段时间外甥和女儿过来这边渡暑假,平常晚上和周末时间都陪着她们了,趁这个周末有空,再抽空再把这块拾起来.         这么久没写了,再次拿起键盘,想想,发表些什 ...

  4. MATLAB 程序处理结果出现 NAN 问题

    1)0/0  或者说  任意常数/0  也就是0不能做分母. (nan出现的情况绝大部分是分母出现0了)   若分子为0的情况,(分母不为0),结果也应该是0而非 NAN. 2)如果是 无穷大比无穷大 ...

  5. Saltstack之Scheduler

    一.引言: 在日常的运维工作中经常会遇到需要定时定点启动任务,首先会考虑到crontab,但是通过crontab的话需要每台机器下进行设置,这样统一管理的话比较复杂:通过查百度和google发现sal ...

  6. 在 Windows 8、Windows 10 桌面模式下的 .NET Framework 程序中，引用 Windows.Runtime 的 API。

    参考:1.https://www.cnblogs.com/webtojs/p/9675956.html 2.http://jennal.com/2016/04/28/using-windows-run ...

  7. HTML5学习笔记（二十九）：Cookie和Session

    HTTP协议本身是无状态的,这和HTTP最初的设计是相符的,每次请求都是创建一个短连接,发送请求,得到数据后就关闭连接.即每次连接都是独立的一次连接. 这样的话,导致的问题就是当我在一个页面登陆了账号 ...

  8. [HBase Manual] CH2 Getting Started

    Getting Started Getting Started 1. Introduction 2.Quick Start-Strandalone HBase 2.1 JDK版本选择 2.2 Get ...

  9. hive sql求多个字段的最小值和最大值的办法

    1. 准备数据表test2 create table test2( a int, b int, c int, d int, e int); 2. 准备2条数据 ,,,,); ,,,,); 查询显示如下 ...

  10. 通过反射调用Unity编辑器提供的各种功能

    Unity编辑器功能丰富易上手,其实编辑器提供的大多数菜单操作,在代码里面都是能够找到对应接口的,但是这些接口都没有对我们开放,怎么办? 很简单,直接使用反射调用即可. 首先使用Reflector或I ...