css 清楚浮动的几种方式
方法一: 使用clear属性的空元素
<div style="clear:both;"></div>
方法二:使用overflow属性
给浮动的元素容器添加overflow:hidden/auto;
在添加overflow属性后,浮动元素又回到了容器层,把容器层撑起来,达到清理浮动的效果
另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1。
方法三:给浮动元素后边的元素添加clear元素
方法四:使用css的:after伪元素
.clearfix:after {
content:'020';
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
zoom:1;
}
css 清楚浮动的几种方式的更多相关文章
- css清除浮动的两种方式(clearfix和clear)
最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都 ...
- css清除浮动的几种方式,哪种最合适?
细心的人可能发现了,写的导航条中存在一个问题,那就是使用了float之后,父级盒子的高度变为0了. 我们来写一个例子来看一下,创建一个父级div,并设置border属性,然后下边创建两个子元素span ...
- HTML/css清除浮动的几种方式
浮动在HTML/CSS布局中十分常见,虽然浮动布局可以实现很多有用的排版效果,但是浮动的元素脱离了文档流,可能造成包含块高度塌陷.下方行框上移等行为.因此在使用浮动实现想要的效果后,通常还需要清除浮动 ...
- CSS清除浮动的几种方式
浮动对页面的影响: 如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0, 下面的元素会自动补位,所以这个时候要进行浮动的清除 ...
- css清除浮动的3种方式
前言: 当不给父元素设置宽高时,父元素的宽高会被子元素的内容撑开.但当子元素设置浮动属性(float) 后, 子元素会溢出到父元素外,父元素的宽高也不会被撑开,这称之为“高度塌陷”.可以理解为使用浮动 ...
- css 清楚浮动的8种方式
清除浮动是每个 web前台设计师必须掌握的机能. css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同一时候会影响到前后标签.父级标签的位置及 width height 属性.并且相 ...
- css 清除浮动的几种方式
1.给浮动的元素的父级添加 overflow:hidden;属性 ul>不浮动 添加overflow:hidden; li>浮动 2.给浮动的元素的父级添加after伪类 ul:after ...
- 【css】清除浮动的几种方式
[css]清除浮动的几种方式 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...
- css考核点整理(一)-浮动的理解和清除浮动的几种方式
浮动的理解和清除浮动的几种方式 clear语法:clear : none | left | right | both 取值:none : 默认值.允许两边都可以有浮动对象left : 不允许左边有浮动 ...
随机推荐
- 如何让写得html页面自动刷新
一:新建一个文件夹用vscode打开 二:终端输入npm init 然后一路回车会在文件夹中生成一个package.json文件 三:新建个html,在终端中输入cnpm install -g liv ...
- samtools 使用简述
功能如下: 1.View 主要功能讲sam文件转位bam文件. 涉及的参数: -b 输出bam格式..默认是sam文件 -h 输出的sam文件带header..默认不带 -H 仅仅输出header - ...
- opencv的一些功能代码
opencv调用摄像头 #include<opencv2/opencv.hpp> using namespace cv; void main(){ VideoCapture cap; ca ...
- 记录几个字符串转html的帮助类,已防忘记
html的帮助类 /// <summary> /// Represents a HTML helper /// </summary> public partial class ...
- 使用npm私有服务器保存公司内部强业务类型组件(二):vue-webpack框架
一套基于vue webpack element-ui的npm私有服务器开发组件框架 下载 在配置的有两个地方需要注意: 1:配置library library选项: 如果设置此选项,会将bundle导 ...
- 使用npm私有服务器保存公司内部强业务类型组件(一):npm私有服务器搭建
1:安装centOS虚拟机 2:安装完成虚拟机后完成后开启系统网卡: 进入到/etc/sysconfig/network-scprits/ 打开ifcfg-ens33文件 找到 ONBOOT=NO 改 ...
- 内置函数&匿名函数
1.内置函数 Built-in Functions abs() dict() help() min() setattr() all() dir() hex() next() slice ...
- android手机短信获取
关于Android中对短信的一些相关操.我看到一个文章下面我就从标题中的三个方面来对Android系统中的短信操作进行一个简单地学习. 短信发送: 由于Android中对短信发送方法的优良封装,之后对 ...
- 重置密码解决MySQL for Linux错误 ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)
出现报错: Warning: World-writable config file '/etc/my.cnf' is ignored // 该文件权限过高ERROR 1045 (28000): Acc ...
- C/C++与C#之间类型的对应
最近在研究pos打印机相关功能, 调用winapi以及跨进程通信等,都涉及到类型之间的转换. C/C++ C# HANDLE, LPDWORD, LPVOID, void* IntPtr LPCTST ...