css清浮动

我们在平常做项目的时候,float这个css属性经常会用到。元素浮动会让元素脱离文档流,从而不能撑开父级的内容。今天我将展示常见的清除浮动的方法。

什么是浮动

浮动元素脱离文档流并且向左或者向右移动,直到浮动元素的边缘碰到父级框或者另一个浮动元素的边框为止。

浮动的影响

浮动元素会使得父级元素高度塌陷

html:

<ul><li></li><li></li><li></li>
</ul>

css:

* { // 实际项目中不要用通配符*去设置样式margin: 0;padding: 0;
}
ul {border: 10px solid red;
}
li {width: 100px;height: 100px;margin-left: 10px;list-style: none;background: orange;float: left;
}

效果图:

由于浮动元素脱离文档流,不再占据原来的文档流空间,不能撑开父级的内容,所以父级的高度就不存在了。

下面我们将介绍清浮动的两个大类。

清浮动的方法

clear清浮动(clearfix方案)

在css中专门有一个来解决高度塌陷的属性,那就是我们常用的clear属性。clear的用法如下:

clear: none | right | left | both | inherit;

下面对clear值的解释来之w3c

  • none:默认值。允许浮动元素出现在两侧。
  • right:在右侧不允许浮动元素。
  • left:在左侧不允许浮动元素。
  • both:在左右两侧均不允许浮动元素。
  • inherit:规定应该从父元素继承 clear 属性的值。

我们清除浮动的时候常用

clear: both;
注意: clear属性只对块级元素起作用。

下面展示一个与clear值为both有关的例子。

html:

<ul><li></li><li></li><li></li><li></li><li></li>
</ul>

css:

* {margin: 0;padding: 0;
}
li {width: 100px;height: 100px;margin-left: 10px;list-style: none;background: orange;float: left;margin-bottom: 10px;
}
li:nth-child(3) {clear: both;
}

上面代码所渲染出来的效果是下面的图:

不知道当大家看到这个结果的时候,是不是开始怀疑w3c中的解释了。实际上clear值为both指的是让自身和前面的浮动元素不相邻。没错,是前面的,并不是前面后面都兼顾,所以上面的例子中展示的效果是两列而不是三列。

下面展示使用clear清浮动,接着最开始的代码,我们对其进行清浮动。(注意下面只展示在最开始代码中增加的代码)

css:

ul {zoom: 1;        // 为了兼容IE6/7
}
ul:after {          // 内联content: '';    // 内容为空字符是为了不影响本来的domdisplay: block; // 这里的值也可以是table | list-item,只要能够让伪类成为块级元素。clear: both;
}

效果图:

BFC清浮动

BFC的全称block formatting context,中文意思是“块级格式化上下文”。

BFC特性

“css世界的结界”(引自张鑫旭的《css世界》),在这个结界中内部子元素不管如何变化都不会对外部的元素有影响。BFC元素的margin不会发生折叠,因为margin折叠影响外部元素的布局。清除浮动,如果BFC不能够清除浮动,那么BFC元素高度就会塌陷,那么内部的元素就会影响到其他的元素的布局,这跟前面说的BFC元素内部的子元素不会影响外部元素相违背。

BFC的实现:(引自张鑫旭的《css世界》)

  • 根元素
  • float的值非none
  • overflow的值为auto、scroll、hidden
  • display的值为table-cell、table-caption和inline-block
  • position的值不为relative和static

css:

ul {overflow: auto; // 使浮动元素的父级成为BFC就行可以实现清浮动
}

效果如下图:

大家有可能会有疑问只要一句话实现BFC,那为什么我们还要用上面的clearfix方案?

overflow: auto;
不支持IE6/7。
overflow: hidden;
不支持IE6,使用这个属性容器外的元素可能被隐藏。

但是,大家想下现在使用IE6/7/8的用户还有好多。我个人觉得现在我们没必要去管IE6/7/8,抛弃那部分用户对于我们的影响微不足道。上面这段话只是个人想法,并没有想过让他人必须这样想,如果大家对这段有什么不满请轻喷。

最后建议大家不要一味的使用clearfix方案。

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

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

相关文章

DirectX11 学习笔记7 - 支持自由移动的摄像机

如今将又一次制定一个camera摄像机。能够自由移动。比方前进 后退&#xff0c;上游 下潜。 各个方向渲染之类的。 首先设置按键。 这个时候须要在 XWindow.h 里面 bool XWindow::frame() {//推断是否按下ESC键if(x_input->isKeyDown(VK_ESCAPE))return false;//假设A,S,D,W,…

腾讯吃鸡 android,腾讯吃鸡手游《光荣使命》正式上线:安卓/iOS不限号测试

IT之家11月29日消息 今天下午&#xff0c;腾讯首款百人战术竞技手游《光荣使命》在安卓、iOS双平台正式上线&#xff0c;开启全面测试。(官网下载&#xff1a;点此链接&#xff0c;双平台已开放下载。)该游戏采用第三人称射击视角&#xff0c;玩家化身参与“使命行动”军事演习…

lazada铺货模式的选品_lazada小白的运营难点→铺货与精细化运营的优劣势详解

lazada是铺货还是精细化经营第一种铺货铺货作为平台早期都是比较受欢迎的&#xff0c;平台的蛮荒期&#xff0c;成长期当中&#xff0c;铺货的商家是非常受欢迎的&#xff0c;因为平台需要更多SKU产品&#xff0c;去吸引买家&#xff0c;铺货这个时候是最好的也是能最快的成长起…

excel数据生成sql insert语句

excel数据生成sql insert语句 excel表格中有A、B、C三列数据&#xff0c;希望导入到数据库users表中&#xff0c;对应的字段分别是name,sex,age 。 在你的excel表格中增加一列&#xff0c;利用excel的公式自动生成sql语句&#xff0c;方法如下&#xff1a; 1、增加一列&#xf…

重载,覆盖,隐藏

转载于:https://www.cnblogs.com/jhcelue/p/7145525.html

荣耀鸿蒙系统开机动画,荣耀赵明:鸿蒙系统首发设备欲屏蔽开机广告

来源&#xff1a;硅谷分析狮余承东表示8月9日会发布鸿蒙系统&#xff0c;而从他透露的一些细节看&#xff0c;鸿蒙系统将首先运用在智慧屏终端上&#xff0c;其配合大屏幕和自研芯片(麒麟AI芯片&#xff0c;鸿鹄智慧显示芯片&#xff0c;凌霄WIFI芯片)&#xff0c;将实现生态上…

Hamcrest包含匹配器

与Hamcrest 1.2相比 &#xff0c;针对Matchers类的Hamcrest 1.3 Javadoc文档为该类的几种方法添加了更多文档。 例如&#xff0c;四个重载的contains方法具有更具描述性的Javadoc文档&#xff0c;如下面所示的两个比较屏幕快照所示。 尽管仅通过尝试就可以弄清楚“包含”匹配器…

函数 (四) 迭代器和生成器

一 迭代器 一 迭代的概念 #迭代器即迭代的工具&#xff0c;那什么是迭代呢&#xff1f;#迭代是一个重复的过程&#xff0c;每次重复即一次迭代&#xff0c;并且每次迭代的结果都是下一次迭代的初始值 while True: #只是单纯地重复&#xff0c;因而不是迭代print(>) l[1,2,3]…

进阶-JMS 知识梳理

JMS 一、 概述与介绍 ActiveMQ 是Apache出品&#xff0c;最流行的、功能强大的即时通讯和集成模式的开源服务器。ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现。提供客户端支持跨语言和协议&#xff0c;带有易于在充分支持JMS 1.1和1.4使用J2EE企业集成模式…

android蓝牙pair,Android向更多蓝牙设备开放Fast Pair功能 配对更轻松了

原标题&#xff1a;Android向更多蓝牙设备开放Fast Pair功能 配对更轻松了 来源&#xff1a;cnBeta.COM蓝牙是一项应用非常广泛的无线技术&#xff0c;在无线音频配件、智能手表和智能家电中都广泛使用。不过蓝牙设备的配对体验并不优秀&#xff0c;而且无法实现跨平台的一致性…

python绘制帕累托图

python绘制帕累托图代码 1 import pandas as pd2 import matplotlib.pyplot as plt3 plt.rcParams[font.sans-serif][SimHei]#表示可以显示中文4 plt.rcParams[axes.unicode_minus]False#表示可以正常显示正负号5 datapd.read_csv(catering_dish_profit.csv,index_coltype)6 pr…

html5 测评游戏,暗黑之王评测:HTML5游戏铸就最华丽ARPG冒险

由白鹭时代(Egret Technology)与比悦科技联手推出的重度大型HTML5游戏《暗黑之王》&#xff0c;一款典型的ARPG手游&#xff0c;其HTML5版本推出以来&#xff0c;获得了来自业界、玩家和媒体的大量关注。其丰富的游戏内容和玩法&#xff0c;加上卓越的游戏性能表现&#xff0c;…

搞定flex布局

这几种方式的搭配使用可以轻松搞定 PC 端页面的常见需求&#xff0c;比如实现水平居中可以使用 margin: 0 auto&#xff0c;实现水平垂直同时居中可以如下设置&#xff1a;.dad {position: relative; } .son {position: absolute;margin: auto;top: 0;right: 0;bottom: 0;left…

Fiddler抓包使用教程-QuickExec

转载请标明出处&#xff1a;http://blog.csdn.net/zhaoyanjun6/article/details/73468287 本文出自【赵彦军的博客】 在 Fiddler 中自带了一个 QuickExec 命令行&#xff0c;用户可以直接输入并快速执行脚本命令。 常见命令 help 打开官方的使用页面介绍&#xff0c;所有的命令…

html5与css3都要学吗,前端要学css3吗?

前端要学css3&#xff1b;HTML5、CSS3是前端工程师必须要学会。现在移动端的兴起&#xff0c;导致web前端开发的技术逐变向css3和html5转变&#xff0c;所以css3一定要学。CSS3是CSS(层叠样式表)技术的升级版本&#xff0c;于1999年开始制订&#xff0c;2001年5月23日W3C完成了…

react 判断图片是否加载完成_React中型项目的优化实践

项目介绍整个项目大概有60个页面&#xff0c;用到的组件大概150&#xff0c;package里面的依赖大概有70个&#xff0c;应该勉强算得上是一个中型的React的项目了。下面给大家看看我们现在build一次项目的结果--打包时间约150s&#xff0c;打包完之后的资源gzip之后约1.2m&#…

搭建本地wordpress

1.首先&#xff0c;下载xampp&#xff0c;安装按默认勾选即可。 2.安装完成后&#xff0c;启动Apache和MySQL这两个服务。 启动后变成绿色&#xff0c;表示启动成功。 3.点击MySQL项的Admin进入数据库后台。 4.点击用户账户新建用户。 5.填写用户名&#xff0c;host name选本地…

Python基础【day02】:字符串(四)

在Python中字符串本身有带很多操作&#xff0c;字符串的特性&#xff0c;不可以被修改 0、字符串常用功能汇总 1、字符串的定义 #定义空字符串>>> name#定义非空字符串 >>> name"luoahong"#通过下标访问 >>> name[1] u#不能修改字符串的值…

html5 窗口变形,HTML5画布(变形)

坐标变换案例1&#xff1a;function draw(){var cdocument.getElementById("myCanvas");var cxt c.getContext("2d");cxt.translate(200,50);cxt.fillStylergba(255,0,0,0.25);for(var i0;i<40;i){cxt.translate(25,25);cxt.scale(0.9,0.9);cxt.rotate(…

appium GUI介绍

Appium作为APP端的自动化测试工具&#xff0c;具有很多的有点&#xff0c;今天主要介绍一下它的UI界面&#xff0c;包含其中的一些参数等。主要说的是windows下的APPIUM GUI。 先看一眼它的界面(版本为1.4.16.1) 注: 1.android Settings - Android设置按钮&#xff0c;所有和安…