清除浮动的8种方法
文章标签： 清除浮动的几种方法 清除浮动 清除浮动大全 清除浮动有这几种方法
版权
清除浮动的几种方式
1.给父级div定义伪类：after和zoom
.clearfloat:after{display:block;clear:both;content:"";overflow:hidden;height:0;}
.clearfloat{zoom:1;}
这种是最常用的清除浮动的方法也是最推荐的，用起来非常的爽，直接在浮动的两个元素的父级加一个clearfloat类名就可以，兼容IE6、7、8所带的浮动问题；
2.在浮动尾部添加空div标签clear:both;
.clearfloat{clear:both;}
<div class='clearfloat'></div>
这种清除浮动的方法不推荐，需要增加好多不必要的代码，要是好多结构都是浮动的话，那你的崩溃，主要是利用css提高的clear:both清除浮动，让父级能够获取到高度，这个也能够兼容IE；
3.父级div定义overflow:hidden
.div {overflow:hidden;}
这种清除浮动的方法只推荐没有使用position或对overflow:hidden理解比较深的朋友使用,必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度,千万不要感觉这个特别好用就放不下了，等到你遇到问的时候就和你加的这个有关，很坑！（友情请示）
4.父级给高度height
这种清除浮动的方法不推荐使用，很不友好，一般代码写的多就知道，一般图片盒子什么的都不给固定的高度，这里定义高度会给后期加内容或者维护带来不便；
5.父级div定义overflow:auto
.div{overflow:auto;}
这种清除浮动的方式也不推荐，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧，一旦内容超过了父级的盒子就会出现滚动条
6.父级随子级一起浮动
这种清除浮动的方式也不推荐，要是这样就更完了，那父级上面的盒子都需要浮动，然后你就看着办吧
7.父级div定义为表格display:table
.div{display:table;}
这种清除浮动的方式也不推荐,这样的话div就变成表格的形式了，要是需要设定哪个子元素在某一个位子就难受了，还会有很多问题，我就不一 一说
8.加br标签
相对定位(relative)
相对定位是元素相对于它 原来在标准流中的位置 来说的。（自恋型）
效果图：
相对定位的特点：（务必记住）
相对于 自己原来在标准流中位置来移动的
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。
绝对定位(absolute)
绝对定位是元素以带有定位的父级元素来移动位置 （拼爹型）
完全脱标 —— 完全不占位置；
父元素没有定位，则以浏览器为准定位（Document 文档）。
父元素要有定位
将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
绝对定位的特点：（务必记住）
绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位置
不保留原来的位置，完全是脱标的。
因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。
绝对定位的盒子居中
注意：绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。
在使用绝对定位时要想实现水平居中，可以按照下图的方法：
left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
margin-left: -100px;：让盒子向左移动自身宽度的一半。
3.2 堆叠顺序（z-index）
在使用定位布局时，可能会出现盒子重叠的情况。
加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子。
应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。如下图所示：
z-index 的特性如下：
属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
如果属性值相同，则按照书写顺序，后来居上；
数字后面不能加单位。
注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
3.3 定位改变display属性
display 是 显示模式， 可以改变显示模式有以下方式:
可以用inline-block 转换为行内块
可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。
所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。
同时注意：
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 （我们以前是用padding border overflow解决的）
也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。
4. 定位小结
定位模式 是否脱标占有位置 移动位置基准 模式转换（行内块） 使用情况
静态static 不脱标，正常模式 正常模式 不能 几乎不用
相对定位relative 不脱标，占有位置 相对自身位置移动 不能 基本单独使用
绝对定位absolute 完全脱标，不占有位置 相对于定位父级移动位置 能 要和定位父级元素搭配使用
固定定位fixed 完全脱标，不占有位置 相对于浏览器移动位置 能 单独使用，不需要父级
注意：
边偏移需要和定位模式联合使用，单独使用无效；
top 和 bottom 不要同时使用；
left 和 right 不要同时使用。
5. 网页布局总结
一个完整的网页，有标准流 、 浮动 、 定位 一起完成布局的。每个都有自己的专门用法。
1). 标准流
可以让盒子上下排列 或者 左右排列的
2). 浮动
可以让多个块级元素一行显示 或者 左右对齐盒子 浮动的盒子就是按照顺序左右排列
3). 定位
显示与隐藏
display
none : 无 隐藏元素
block : 显示 转换为块级元素
visibility
visible ：显示
hidden ：隐藏
区别 ：隐藏时display不占位置，visibility占位置
overflow
hidden :溢出的部分隐藏掉
visible : 显示
auto ：自动出现滚动条
scroll ：一直有滚动条
一、鼠标样式 cursor
cursor： 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
li {
cursor: pointer;
}
属性值 描述
default 小白，默认
pointer 小手
move 移动
text 文本
not-allowed 静止
二、轮廓线 outline
给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框
input {
outline: none;
}
三、防止拖拽文本域 resize
文本域可以随意变大变小可能会影响其他页面的布局
实际开发中，我们文本域右下角是不可以拖拽的
textarea{
resize: none;
}
CSS3 Text Overflow属性
CSS3文本溢出属性指定应向用户如何显示溢出内容
实例
p.test1 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: clip; } p.test2 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: ellipsis;
CSS3的换行
如果某个单词太长，不适合在一个区域内，它扩展到外面：
CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字：
CSS代码如下：
实例
允许长文本换行:
p {word-wrap:break-word;}
CSS3 单词拆分换行
CSS3 单词拆分换行属性指定换行规则：
CSS代码如下：
实例
p.test1 { word-break: keep-all; } p.test2 { word-break: break-all; }
新文本属性
| 属性 | 描述 | CSS |
| 规定标点字符是否位于线框之外。 | 3 | |
| 规定是否对标点字符进行修剪。 | 3 | |
| 设置如何对齐最后一行或紧挨着强制换行符之前的行。 | 3 | |
| 向元素的文本应用重点标记以及重点标记的前景色。 | 3 | |
| 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 | 3 | |
| 规定文本的轮廓。 | 3 | |
| 规定当文本溢出包含元素时发生的事情。 | 3 | |
| 向文本添加阴影。 | 3 | |
| 规定文本的换行规则。 | 3 | |
| 规定非中日韩文本的换行规则。 | 3 | |
| 允许对长的不可分割的单词进行分割并换行到下一行。 |
1、精灵图技术产生的目的：很多大型网页在首次加载的时候都需要加载很多的小图片，而考虑到在同一时间，服务器拥堵的情况下，为了解决这一问题，采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题。
2、精灵图技术的本质：所谓精灵图就是把很多的小图片合并到一张较大的图片里，所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，这样在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。例如王者荣耀页面里的几个小logo:
- 那么这是怎么实现将这么一张复杂的图片分别展示出来的呢，这里就得运用到了background-position。我们通过它来改变背景图片的位置，从而显示出我们想要显示出来的部分。
一、什么是滑动门
大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门
正在上传…重新上传取消
小米官网，网页滑动门效果
二、实现滑动门所需技术
- 简单HTML基础知识
- 简单的CSS基础样式
- CSS定位
三、如何实现滑动门
1.准备好一段HTML代码
<div class="bg">
<ul>
<li>
<a href="#">手机 电话卡</a>
<div class="div1">
<p>这是我的第一个滑动门</p>
<img src="img/海贼.jpg" alt="" width="100%" height="100%">
</div>
</li>
<li>
<a href="#">手机 电话卡</a>
<div class="div2"></div>
</li>
<li>
<a href="#">手机 电话卡</a>
<div class="div3"></div>
</li>
<li>
<a href="#">手机 电话卡</a>
<div class="div3"></div>
</li>
</ul>
</div>
2.给当前HTML结构添加一些样式
<style>
body,ul,li,div{
margin:0;
padding:0;
}
ul{
list-style: none;
padding:20px 0px;
width: 234px;
background: rgba(0,0,0,.6);
/*定位 作为父级使用*/
position: relative;
}
ul li{
height: 42px;
line-height: 42px;
padding-left: 20px;
}
ul li:hover{
background: #ff6700;
}
ul li a{
color: #fff;
text-decortion: none;
font-size: 14px;
}
</style>
3.使用定位实现滑动门效果
/*滑动门*
ul .div1,.div2,.div3{
width: 800px;
height: 460px;
background: skyblue;
/*使用定位实现滑动门-------重要步骤*
position: absolute;
top:0;
left:234px;
display: none;
}
/*当鼠标悬停在内容上是显示对应的代码块*/
ul li:hover .div1{
display: block;
width:800px;
opacity: 1;
}
ul li:hover .div2{
display: block;
background: pink;
width:600px;
height: 460px;
例如这是一张大的精灵图，我们现在用它来拼出我们想要的字母，例如ANDY
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
display: inline-block;
background: url(images/abcd.jpg) no-repeat;
}
.aa{
width: 108px;
height: 110px;
background-position: 0 -9px;
}
.nn{
width: 112px;
height: 110px;
background-position: -255px -276px;
}
.dd{
width: 97px;
height: 107px;
background-position: -363px -8px;
}
.yy{
width: 110px;
height: 110px;
background-position: -367px -556px;
}
</style>
</head>
<body>
<div class="aa"></div>
<div class="nn"></div>
<div class="dd"></div>
<div class="yy"></div>
</body>
</html>
扫一扫
143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
