清除浮动php,CSS清除浮动

今天看到一篇文章关于清除浮动的,突然间脑袋短路了,咦?为什么要清除浮动?原谅我的无知,搜了下原来是这样,又倒腾出原来的笔记,唉,本来就有记录啊,而且也会经常用到,用的久了连原理都忘了。恩,防止自己再犯同样的错误,我还是自己总结整理出来吧!话不多说,代码为证!

1 DOCTYPE html>

2

3

4

5

为什么要清除浮动title>

6

7 .wrapper{width:50%;background:cornflowerblue;border:2px solid black;}

8 .box1{width:30%;height:100px;background:red;}

9 .box2{width:30%;height:100px;background:black;}

10 .box3{width:30%;height:100px;background:chocolate;}

11 style>

12 head>

13

14

15 div>

16 div>

17 div>

18 div>

19 body>

20 html>

恩,各个浏览器运行的效果图如下:

6a7afd842d528285c9cb9b049663938b.png

其中A-B-C分别是I元素里的子元素,如果没有浮动的情况它们是按照标准文档流布局(块级元素从上至下,行内元素从左至右),一个网页需要合理的布局才能够吸引住用户,我们需要在有限的空间内展示更多的信息,有时候需要a,b,c,排在一行,咱不用高大上的Flexbox(弹性盒布局)因为IE8及以下都不支持,你要问我怎么知道的,给大伙儿甩个网址http://caniuse.com/#home,自行搜索哦!另外IE不支持VW和VH单位,用的小朋友谨慎!通常情况

我们是不需要给父元素定宽高的,而且想让它宽高自适应,但是如果我们给子元素添加了float:left;之后会是什么情况呢?咱们用图说话:

08d633db0caa7d4dfef21f4ef583a6f0.png

父元素哪里去了?!恩,这里咱要说明下浮动是什么原理了,打个比方吧,原谅我的想象力不丰富,我们把父元素想象为一个可以自动收缩的盒子,当我们不停地往里面放子盒子的时候,它就会自动被撑开,给子元素加float(英文原义指飘动浮动的意思)的时候,就相当于子元素飘在了父盒子之上,那么显然父盒子空了就自动收缩回去了,现在我们要做的是如何不让它收缩回去:

1.给父元素加overflow:hidden;恩,要说这个方法的优劣,我刚才查了下,可能会对SEO不友好,但具体有多大的严重影响我还没有这方面的经验,姑且就这样解释吧,待我遇到了再回过来修改。

.wrapper{width:50%;background: cornflowerblue;border:2px solid black;overflow:hidden;}

2.给子元素的下方添加空的div

1

2

3 div>

4 div>

5 div>

6 div>

7 div>

8 body>

box4就是我们添加的空元素,这个空元素的具体写法如下:(有兼容~有兼容~有兼容~万恶的IE6不支持,因为人家有默认的最小高度)

1 .box4{clear:both;height: 0;overflow: hidden;}

3.采用伪类选择器的方式来达到清除浮动的目的,我工作中采用的就是这种方式,屡试不爽哦!(不好意思,刚才自己给自己挖了一个坑,目前还在坑里,我再试试...)

.wrapper:after{clear:both;content:".";display:block;height: 0;overflow: hidden;visibility: hidden;}

恩,好了,就是上面的那样,content: '.'; display:block;对于五大浏览器来说不可缺少,visibility:hidden;的作用是允许浏览器解析它,但是用户看不到哦。

原创文章,转载请注明出处 蜗蜗牛在路上[http://www.cnblogs.com/wowoniuzailushang]

同步发表于: http://blog.csdn.net/wowoniuzailushang CSDN

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/573295.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux下使用Speedtest测试网速

导读Speedtest是用来测试网络性能的开源软件,在Linux下面安装Speedtest可以用来测试网络出口的上传和下载速度,帮助排查网络方面导致的故障。Speedtest介绍由于公司几个项目用户访问的时候响应较慢,项目本身没问题,服务及调用的接…

iOS开发ARC内存管理

本文的主要内容: ARC的本质ARC的开启与关闭ARC的修饰符ARC与BlockARC与Toll-Free BridgingARC的本质 ARC是编译器(时)特性,而不是运行时特性,更不是垃圾回收器(GC)。 Automatic Reference Counting (ARC) is a compile…

php 实时查看公众号加粉数据,公众号实时涨粉数据怎么查看

公众号文章发布后如何查看涨粉效果?怎么根据发文情况来调整公众号运营方向呢?这款能监控实时涨粉数据的我们在进行公众号运营时,除了是简单的写文、排版、推送,还需要通过优质的内容不断吸引新用户快速发展新用户,将公…

iOS - UITextField

前言 NS_CLASS_AVAILABLE_IOS(2_0) interface UITextField : UIControl <UITextInput, NSCoding>available(iOS 2.0, *) public class UITextField : UIControl, UITextInput, NSCoding 1、UITextField 的创建 Objective-C // 实例化 UITextField 对象UITextFi…

微信php翻译和天气预报整合,微信公众平台天气预报功能开发

本来是想自己直接从中国天气网获取信息并处理&#xff0c;后来发现处理起来太麻烦&#xff0c;而且要获取所有城市的城市编码&#xff0c;再有就是&#xff01;不支持国外天气&#xff01;&#xff01;(我们学校有很多毕业生在国外上学&#xff0c;所以我考虑还是做出支持国外天…

关于Jenkins找不到依赖Jar包问题

昨晚在Jenkins发布时遇到一个Jar包找不到的问题&#xff0c;控制台的报错信息如下&#xff1a; 说白了就是找不到依赖的Jar包&#xff0c;但是当我们回退到灰度的时候发现灰度的环境是构建是没有问题的&#xff0c;为什么同一套代码在两个环境却有天壤之别呢&#xff0c;本着试…

VBS基础篇 - Dictionary对象

VBS基础篇 - Dictionary对象 Dictionary是存储数据键和项目对的对象&#xff0c;其主要属性有Count、Item、Key&#xff0c;主要方法有Add、Exists、Items、Keys、Remove、RemoveAll。 建立字典 Dim Dict : Set Dict CreateObject("Scripting.Dictionary")添加键值对…

linux编译mesa,如何在Ubuntu 16.04,17.10中安装Mesa 17.3.3

最新的MESA 3D图形库17.3.3现在在Ubuntu-X team PPA存储库中为Ubuntu 16.04和Ubuntu 17.10提供。Mesa 17.3.3实现了OpenGL 4.5 API&#xff0c;但由glGetString(GL_VERSION)或glGetIntegerv(GL_MAJOR_VERSION)/glGetIntegerv(GL_MINOR_VERSION)报告的版本取决于所使用的特定驱动…

iOS开发Swift篇—(三)字符串和数据类型

一、字符串 字符串是String类型的数据&#xff0c;用双引号""包住文字内容 let website "http://www.github.com" 1.字符串的常见操作 &#xff08;1&#xff09;用加号 做字符串拼接 let scheme "http://" let path “www.github.com” le…

linux查看xml文件的配置,3、kvm虚拟机日常管理与配置

KVM虚拟机的管理主要是通过virsh命令对虚拟机进行管理。1. 查看KVM虚拟机配置文件及运行状态(1) KVM虚拟机默认配置文件位置: /etc/libvirt/qemu/autostart目录是配置kvm虚拟机开机自启动目录。(2) virsh命令帮助# virsh -help或直接virsh命令和&#xff0c;再执行子命令。如下…

linux桌面环境是什么意思,Linux 黑话解释:什么是桌面环境?

在桌面 Linux 世界中&#xff0c;最常用的术语之一就是 桌面环境(Desktop Environment)(DE)。如果你是 Linux 的新手&#xff0c;你应该了解一下这个经常使用的术语。什么是 Linux 中的桌面环境?桌面环境是一个组件的组合体&#xff0c;为你提供常见的 图形用户界面(graphical…

Hadoop 2.5.1集群安装配置

本文的安装只涉及了hadoop-common、hadoop-hdfs、hadoop-mapreduce和hadoop-yarn&#xff0c;并不包含HBase、Hive和Pig等。 http://blog.csdn.net/aquester/article/details/24621005 1. 规划 1.1. 机器列表 NameNode SecondaryNameNode DataNodes 172.16.0.100 172.16.0.…

ubuntu14.04 x86编译upx 3.92 及so加固

的参考文章&#xff1a; http://www.cnblogs.com/fishou/p/4202061.html 1.download upx和所依赖的组件 upx3.92&#xff1a;https://www.pysol.org:4443/hg/upx.hg/archive/tip.tar.gzLZMA4.43&#xff1a;http://nchc.dl.sourceforge.net/project/sevenzip/LZMA%20SDK/4.43/l…

关闭linux系统中读写页缓存,Linux文件系统FAQ

Linux文件系统FAQ2010年03月25日最近实验室搞了一些列讲座&#xff0c;阿福师兄关于文件系统的讲座帮我弄清楚了一些以前不清楚的问题&#xff0c;以问答的形式对文件系统常见的问题进行了总结。Q: 文件系统如何看待底层物理块设备&#xff1f;文件系统把块设备简单的看做线性的…

Unity3d 札记-Let's try shooting 知识点汇总

1\LineRenderer LineRenderer是用来在3d场景画直线的一个工具。 public LineRenderer laserline;laserline.SetPositon(0,startposition);laserline.SetPositon(1,endposition);//设置结束位置startpositon,endposition均为Vector3 ,空间三维坐标 laserline.enabled(true); las…

使用Eclipse创建maven项目

前提&#xff1a;Eclipse中安装了maven插件&#xff0c;或者Eclipse版本在Mars以上&#xff08;自集成maven&#xff09; 1、new project --maven project 2、默认点击next 3、选择构建类型 4、填写groupId和artifactId,groupId就是顶级项目名,artifactId就是模块名&#xff08…

c语言动态存储分配和链表,C语言静态链表和动态链表

1. 静态链表结构体中的成员可以是各种类型的指针变量&#xff0c;当一个结构体中有一个或多个成员的基类型是本结构体类型时&#xff0c;则称这种结构体为“引用自身的结构体”。如&#xff1a;struct link{char ch;struct link *p;} a;p是一个可以指向 struct link 类型变量的…

初步认识JUnit

初步认识JUnit 目前大多数的基于Java的企业应用软件&#xff0c;肯定少不了单元测试&#xff0c;程序员通过编写单元测试来验证自己程序的有效性&#xff1b;管理者通过持续自动的执行单元测试和分析单元测试覆盖率来确保软件本身的质量。可以说单元测试和集成测试在软件开发整…

STM32CubeMX使用方法及功能介绍

推荐 分享一个朋友的人工智能教程&#xff0c;零基础&#xff01;通俗易懂&#xff01;希望你也加入到人工智能的队伍中来&#xff01; http://www.captainbed.net/strongerhuang Ⅰ、写在前面 学习本文之前可以查看我前面的文章&#xff1a; STM32CubeMX介绍、下载与安装 主要…

2ab对应的c语言表达式是,编译原理 作业标准答案

《编译原理》第一次作业参考答案一、下列正则表达式定义了什么语言(用尽可能简短的自然语言描述)&#xff1f;1.b*(ab*ab*)*所有含有偶数个a的由a和b组成的字符串.2.c*a(a|c)*b(a|b|c)* | c*b(b|c)*a(a|b|c)*答案一&#xff1a;所有至少含有1个a和1个b的由a&#xff0c;b和c组成…