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

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

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. springcloud如何实现服务的平滑发布

    在之前的文章中我们提到服务的优雅下线,见: SpringCloud服务如何在Eureka安全优雅的下线 但这个对于ribbon调用其实是不平滑的,shutdown请求到后服务就马上关闭了,服务消费此时 ...

  2. python 执行sql得到字典格式数据

    本文在提供一种方式,实现执行sql语句 返回字典结果集 # 连接数据库,数据库的,这里使用的setting中的默认设置,在这里不做具体的介绍,不懂的可以百度一下 conn = MySQLdb.conn ...

  3. MySQL查询库和表占用的硬盘空间大小

    在mysql中有一个默认的数据表information_schema,information_schema这张数据表保存了MySQL服务器所有数据库的信息.如数据库名,数据库的表,表栏的数据类型与访问 ...

  4. CentOS 7.5 安装KVM虚拟机(Windows)

    一.KVM环境搭建1.检测系统是否支持cat /proc/cpuinfo | egrep 'vmx|svm' KVM是基于x86虚拟化扩展(Intel VT 或者 AMD-V)技术的虚拟机软件,所以查 ...

  5. ELK & ElasticSearch 5.1 基础概念及配置文件详解【转】

    转自:https://blog.csdn.net/zxf_668899/article/details/54582849 配置文件 基本概念 接近实时NRT 集群cluster 索引index 文档d ...

  6. jquery $('#form1').serialize()序列化提交表单

    1.$("#form1").serialize() 把form表单的值序列化成一个字符串,如username=admin&password=admin123 <for ...

  7. fiddler抓包url有乱码

    fiddler抓包url有乱码: 解决具体步骤: 注册表:regedit   HKEY_CURRENT_USER\Software\Microsoft\Fiddler2 1.打开注册表,regedit ...

  8. 强化学习-时序差分算法(TD)和SARAS法

    1. 前言 我们前面介绍了第一个Model Free的模型蒙特卡洛算法.蒙特卡罗法在估计价值时使用了完整序列的长期回报.而且蒙特卡洛法有较大的方差,模型不是很稳定.本节我们介绍时序差分法,时序差分法不 ...

  9. 什么是面向切面编程AOP--知识点汇总

           最近在学这方面的内容,读到的这段话我感觉说的很清楚了:这种在运行时,动态地将代码切入到类的指定方法.指定位置上的编程思想就是面向切面的编程. 面向切面编程(AOP是Aspect Orie ...

  10. 应用程序连接hbase报错:java.net.SocketTimeoutException: callTimeout=60000

    背景说明: 今天对生产环境hbase增加了节点,下午的时候一个同事反馈,应用程序后台报错,如下: Tue Feb 26 17:35:35 CST 2019, null, java.net.Socket ...