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

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

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. Python实现多进程

    Python可以实现多线程,但是因为Global Interpreter Lock (GIL),Python的多线程只能使用一个CPU内核,即一个时间只有一个线程在运行,多线程只是不同线程之间的切换, ...

  2. 转 信号量与PV操作

    在计算机操作系统中,PV操作是进程管理中的难点.首先应弄清PV操作的含义:PV操作由P操作原语和V操作原语组成(原语是不可中断的过程),对信号量进行操作,具体定义如下:    P(S):①将信号量S的 ...

  3. [转]awsome-java

    原文链接 Awesome Java A curated list of awesome Java frameworks, libraries and software. Contents Projec ...

  4. AYUI第12个作品-英雄联盟-魔法少女的星光水晶2.0-WPF版本

    一下 内容基于AYUI6.7制作,主要3个大控件,1个 轮播预览,一个抽奖展示,一个是自己的抽中的历史展示,还有礼品领取,图片变成黑白的滤镜,滚动条网页方式布局 历时4天,制作效果如下: 由于自己爬了 ...

  5. Windows上使用Vagrant打造Laravel Homestead可协同跨平台开发环境

    1.简介 Laravel 致力于让整个 PHP 开发过程变得让人愉悦,包括本地开发环境,为此官方为我们提供了一整套本地开发环境 —— Laravel Homestead. Laravel Homest ...

  6. iOS中UITextField输入判断小数点后两位

    在输入金额的UITextField中,要给予三个规则的判断 1. 只能输入数字(可以通过设置键盘类型为Decimal Pad) 2. 小数点只能有一个 3. 小数点后最多有两位数字 (可以通过正则表达 ...

  7. hdoj：2052

    #include <iostream> #include <string> using namespace std; int main() { int n, m; while ...

  8. ant 通配符

    ant 通配符 我们常用的匹配模式有ANT模式,比如acegi可以用PATTERN_TYPE_APACHE_ANT来使用ANT匹配模式,那什么是ANT匹配模式呢.   ANT通配符有三种:     通 ...

  9. Use OWIN to Self-Host ASP.NET Web API 2 来访问我的webapi

    就是说我们本地的http://localhost:49708/api/test可以通过 这个东西来访问(懒得挂载iis,当然它的强大可不这些,由于测试出了问题 出记录一下) 首先去Nuget包里找到M ...

  10. 使用docker安装tomcat服务

    1. 拉取官方tomcat镜像 docker pull tomcat 2. 创建tomcat容器目录 [root@WSyHRQ171356 /]# mkdir /tomcat/test 3. 创建测试 ...