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 : 不允许左边有浮动 ...
随机推荐
- C# 生成小于Int数值绝对值的随机数
C#中有两种类型的随机数生成器: 伪随机数(System.Random) 安全随机数(System.Security.Cryptography.RNGCryptoServiceProvider) ...
- NGUI实现滑动屏幕的时候,进行环形旋转
在滑动屏幕的时候,上图中的内容饶圆中心旋转,并且箭头的方向保持不变 每个Item上挂载的脚本: using UnityEngine; public class ItemTest : MonoBehav ...
- 浅谈UML中常用的几种图——类图
在UML类图中,常见的有以下几种关系: 泛化(Generalization), 实现(Realization),关联(Association),聚合(Aggregation),组合(Composit ...
- js的中文在网页中显示为乱码
最近的毕业设计写道局部检查用户命是否为空和是否符合规范时 发现页面回显的中文为乱码 then 找到一个和我遇到同样问题的人呐 他说“最近在写一个商城网页的时候遇到了一个问题,那就是javascrip ...
- 前台ajax请求php后台返回成功却进error方法解决
最近几天一直都在解决error问题,周末都没能好好过,悲痛万分,想逃走
- C#用正则表达式替换手机中间几位为*号 代码及解析
/// <summary> /// 替换手机号中间四位为* /// </summary> /// <param name="phoneNo">& ...
- vue整理
安装 vue ui axios import axios from 'axios' // let curWwwPath = window.document.location.href // let p ...
- Assignments 1
跑了一下之前写的UiPath Assignments脚本,没什么问题,发上来供大家参考. 先看结果: github:https://github.com/WendyZheng1022/RPA 有时间我 ...
- Linux下安装Python3.6
1.安装Python3.6 依赖环境安装 # yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-deve ...
- js检测页面离开
window.location = 'yjk://app.h5.ihaozhuo.com?page=livetrailer&videoLiveId=' + parseInt(this.Requ ...