css浮动，清除浮动，溢出属性，定位，设置透明度

浮动>>>float

在css中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是什么元素。

关于浮动的两个特点：

浮动的框可以像做或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现的就像浮动框不存在一样。

三种float取值：

值	描述
left	向左浮动
right	向右浮动
none	默认值，不浮动

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*body标签默认8px,需要清零--*/body {margin: 0;}#a1 {/*高度*/height: 1000px;/*宽度*/width: 20%;/*背景色*/background-color: #e5470e;/*向左浮动*/float: left;}#a2 {/*高度*/height: 1000px;/*宽度*/width: 80%;/*背景色*/background-color: yellowgreen;/*向右浮动*/float: right;}#a3 {height: 200px;width: 200px;}</style>
</head>
<body><div id="a1" ></div><div id="a2" ></div>
</body>
</html>

清除浮动

浮动会带来的什么影响？

造成父标签塌陷问题，用大白话来解释即为钱包里装了毛爷爷，取出毛爷爷之后钱包塌陷。

clear

clear属性规定元素的哪一侧不允许其他浮动元素

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

注意：clear属性只会对自身起作用，不会影响其他元素

通用解决浮动带来的影响方法

在写html页面之前，先提前写好处理浮动带来的影响的css代码。

.clearfix:after {/*内容为空*/content: '';/*将空的内容独占一行*/display: block;/*左右两侧都不允许有浮动元素存在*/clear: both;
}

之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。

溢出属性>>>overflow

如图所示为溢出属性：

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p {height: 100px;width: 100px;border: darkmagenta 3px solid;}</style>
</head>
<body><p>之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。</p></body>
</html>

如何解决？不急，先来了解overflow.

值	描述
visible	默认值，内容不会被修剪，呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的，只显示元素框中的内容。(常用)
scroll	内容会被修剪，但是浏览器会显示滚动条一遍查看其余的内容。(常用)
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承overflow属性的值。

解决上述问题代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p {height: 100px;width: 100px;border: darkmagenta 3px solid;overflow: hidden;   /*溢出部分直接隐藏*/overflow: scroll;   /*设置成上下滚动条的形式*/overflow: auto;     /*同时具备上下滚动条以及底部左右滚动条*/}</style>
</head>
<body><p>之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。之后只要标签出现了塌陷问题就，给该塌陷的标签加一个clearfix属性即可。</p></body>
</html>

展示溢出实际应用场景之头像

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}#a2 {height: 1000px;width: 20%;background-color: darkslateblue;}#a1 {height: 180px;width: 180px;border-radius: 50%;border: 3px solid white;margin: 0 auto ; /*盒子模型外边距为0,并居中展示*/overflow: hidden; /*只展示元素框中的内容*/}#a1>img {width: 100%;}</style>
</head>
<body>
<div id="a2"><p id="a1"><img src="222.jpg" alt=""></p>
</div>
</body>
</html>

定位(position)

静态
所有的标签默认都是静态的static，无法该改变位置
相对定位(relative)
相对于标签原来的位置做移动relative
绝对定位(absolute)
相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)
eg:小米网站购物车
固定定位(fixed)
相对于浏览器窗口固定在某个位置
eg:小米网站右侧导航栏

相对定位>>>relative(了解即可)

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}#a2 {height: 50px;width: 50px;background-color: #3e2001;left: 100px;    /*从左往右移动，若数值为负数方向则相反*/top: 100px;     /*从上往下移动 若数值为负数方向则相反*//*position: static;   !*所有标签默认为静态的static，*!*/position: relative;/*将定位改为相对定位标签由static变为relative，它的性质从原来没有定位的标签变成已经定位过得标签*/}</style>
</head>
<body>
<div id="a2">
</div>
</body>
</html>

绝对定位>>>absolute(常用)

相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)

当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签做定位

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}#a2 {height: 50px;width: 50px;background-color: #3e2001;position: relative;     /*将a2的性质改为(定位过得标签)*/}#a3 {height: 100px;width: 100px;background-color: darkmagenta;position: absolute;left: 200px;    /*从左往右移动，若数值为负数方向则相反*/top: 200px;     /*从上往下移动 若数值为负数方向则相反*/}</style>
</head>
<body>
<div id="a2"><div id="a3"></div>
</div>
</body>
</html>

固定定位>>>fixed(常用)

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;}#a11 {position: fixed; /*定位依据与浏览器窗口*/bottom: 10px; /*距离浏览器底部*/right: 20px; /*高度*/height: 20px;width: 100px;background-color: lavender;border: 3px white solid;text-align: center; /*文字居中*/}</style>
</head>
<body>
<div style="height: 500px;background-color: #3e2001"></div>
<div style="height: 500px;background-color: darkorchid"></div>
<div style="height: 500px;background-color: khaki"></div>
<div id="a11">回到顶部</div>
</body>
</html>

验证浮动和定位是否脱离文档流(原来的位置是否还保留)

浮动 相对定位 绝对定位 固定定位

四者移动之后是否被鸠占鹊巢

不脱离文档流
- 相对定位
脱离文档流
- 浮动
- 绝对定位
- 固定定位

设置对象的层叠顺序>>>Z-index

#a1 {z-index: 999;
}

z-lindex值表示谁压着谁，数值大的压盖住数值小的
只有定位了的元素，才能用z-lindex，也就是说，不管相对定位，绝对定位，固定定位，都可以是使用z-index，而浮动元素不能使用z-index。
z-index值没有单位，就是一个正整数，默认的z-index值为0，如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人定位了元素，永远压住没有定位的元素。

设置透明度>>>opacity(范围0-1)

用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。

实践>>>:博客园

HTML文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="blog.css">
</head>
<body >
<!--背景图片-->
<div class="background_img"></div>
<!--左侧-->
<div class="housemaid_left"><!--头像图片--><img src="ha.png" alt="" class="housemaid_head_portrait"><!--个人标题--><div class="housemaid_title">SM</div><!--自我介绍--><div class="housemaid_self_introduction">这是一个女仆世界</div><!--联系我的方式--><div class="housemaid_contact"><ul><li><a href="#">关于黑丝</a></li><li><a href="#">微博</a></li><li><a href="#">微信</a></li></ul></div><!--标签--><div class="housemaid_label"><ul><li><a href="#">女仆</a></li><li><a href="#">黑丝</a></li><li><a href="#">主人</a></li></ul></div>
</div>
<!--右侧-->
<div class="housemaid_right"><div class="housemaid_right_right"><span class="right_small">女仆养成计划day01</span><span class="right_time">2022/2/10</span></div><div><span class="right_introduction">联系vx:nvpu999，免费传授。</span></div>
</div>
<div class="housemaid_right"><div class="housemaid_right_right"><span class="right_small">女仆养成计划day02</span><span class="right_time">2022/2/10</span></div><div><span class="right_introduction">联系vx:nvpu999，免费传授。</span></div>
</div>
<div class="housemaid_right"><div class="housemaid_right_right"><span class="right_small">女仆养成计划day03</span><span class="right_time">2022/2/10</span></div><div><span class="right_introduction">联系vx:nvpu999，免费传授。</span></div>
</div>
<div class="housemaid_right"><div class="housemaid_right_right"><span class="right_small">女仆养成计划day04</span><span class="right_time">2022/2/10</span></div><div><span class="right_introduction">联系vx:nvpu999，免费传授。</span></div>
</div>
<div class="housemaid_right"><div class="housemaid_right_right"><span class="right_small">女仆养成计划day05</span><span class="right_time">2022/2/10</span></div><div><span class="right_introduction">联系vx:nvpu999，免费传授。</span></div>
</div>
<div class="housemaid_right"><div class="housemaid_right_right"><span class="right_small">女仆养成计划day06</span><span class="right_time">2022/2/10</span></div><div><span class="right_introduction">联系vx:nvpu999，免费传授。</span></div>
</div>
<div class="housemaid_right"><div class="housemaid_right_right"><span class="right_small">女仆养成计划day07</span><span class="right_time">2022/2/10</span></div><div><span class="right_introduction">联系vx:nvpu999，免费传授。</span></div>
</div>
<div class="housemaid_right"><div class="housemaid_right_right"><span class="right_small">女仆养成计划day08</span><span class="right_time">2022/2/10</span></div><div><span class="right_introduction">联系vx:nvpu999，免费传授。</span></div>
</div>
<div class="housemaid_right"><div class="housemaid_right_right"><span class="right_small">女仆养成计划day09</span><span class="right_time">2022/2/10</span></div><div><span class="right_introduction">联系vx:nvpu999，免费传授。</span></div>
</div>
<div class="housemaid_right"><div class="housemaid_right_right"><span class="right_small">女仆养成计划day10</span><span class="right_time">2022/2/10</span></div><div><span class="right_introduction">联系vx:nvpu999，免费传授。</span></div>
</div>
</body>
</html>

CSS文件代码

/*通用样式区域*/
body {margin: 0; /*去除自带8px*/}
a {text-decoration: none; /*去除a标签下划线*/
}a:hover {color: black} /*鼠标放置a标签上颜色*/ul { list-style-type: none; padding-left: 0;} /*无序排列去除圆点，左内边距为0*//*浏览器背景*/
.background_img {/*height: 970px;*//*width: 1680px;*/height: 100%;width: 100%;background-image: url("333.jpeg");background-repeat: no-repeat; /*不平铺*/background-position:-950px -670px;opacity: 0.5;z-index: 0;position: fixed;}
div {font-weight: bolder;z-index: 1;
}/*头像*/
.housemaid_head_portrait {width: 200px;height: 200px;position: relative;border: 3px solid #ffffff;overflow: hidden;border-radius: 50%;left: 50%;margin-left: -100px;margin-top: 15px;/*margin: 15px auto;*/}.housemaid_head_portrait img {width: 100%}/*左侧样式*/
.housemaid_left {background-color: rgba(255,255,255,0.1);float: left;position: fixed;width: 20%;height: 100%;left: 0;top: 0;
}
.housemaid_title {text-align: center; /*文字居中*/margin: 15px; /*外边距*/
}
.housemaid_self_introduction {text-align: center;margin-top: 20px;
}
.housemaid_contact,.housemaid_label {text-align: center;}
li {margin: 10px;}
/*右侧样式*/
.housemaid_right {float: right;width: 80%;/*height: 25%;*/border: 3px rgba(255,255,255,0) groove;
}.housemaid_right_right {margin: 20px 40px 20px 10px;font-size: 30px;box-shadow: 5px 5px 5px rgba(0,0,0,0);/*text-align: center;*/
}.right_small {float: left;margin: 20px auto;text-align: center;color: #d29090;
}
.right_time {float: right;margin: auto 20px;font-size: 15px;}.right_introduction {float: right;margin: auto auto;
}
/*.right_introduction {*/
/*    margin: 10px 0;*/
/*    font-size: 24px;*/
/*    text-indent: 24px;*/
/*    !*border-bottom: ;*!*/
/*    padding-bottom: 10px;*/
/*}*/

css浮动，清除浮动，溢出属性，定位，设置透明度相关推荐

css清除浮动的几种方法_web前端学习路线分享CSS浮动-清除浮动篇
web前端学习路线分享CSS浮动-清除浮动篇,为什么要清除浮动这里所说的清除浮动,并不是不要浮动了,而是清除浮动与浮动之间的影响.那么到底会有什么影响呢? 1．高度塌陷举个例子我们看一下. 我们在 ...
html消除绝对定位的影响,CSS 绝对定位 ,浮动,清除浮动
首先: 我们需要知道div元素(块级元素)独占一行 box1 box2 如下图所示,box1和box2独占一行,可见如果每个div都独占一行,我们根本无法进行布局,所以我们就需要绝对定位和浮动来帮助我 ...
html清除js设置的浮动,css 怎么清除浮动
而此段时间最烦的是森林群里面的一群人每天上班都在吵,然后我就每次都装嫩的在里面问:"各位高手,劳烦请问一下:清除浮动怎么弄?" 清除浮动一个凡是做页面的人都会遇到的一个东西,但是是 ...
CSS基础-清除浮动-李南江
配套视频下载地址清除浮动盒子高度问题在标准流中内容的高度可以撑起盒子的高度 <style>div{background-color: red;}p{width: 200px;heig ...
【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )
文章目录一.清除浮动 - 使用 after 伪元素 ( 最流行写法 ) 1.额外标签法和 overflow 样式法弊端 2.after 伪元素清除浮动简介 3.after 伪元素清除浮动核心代码 ...
css如何清除浮动（二）
2019独角兽企业重金招聘Python工程师标准>>> 在上篇介绍通过设置祖先元素的高度类清除浮动,但在实际的网站开发中,很少会设置元素的高度,那这是为什么呢? 是因为元素一般都能被 ...
关于CSS样式清除浮动的总结
浮动的元素之间是互相贴靠的.但是在实际的工作中,我们是希望同组的元素互相贴靠的,但是不同组的元素之间是不互相贴靠的.第二组的元素不应该与第一组的元素有任何互相的影响. 比如,我们想要的效果是这样的: ...
清除浮动最有效的css写法,清除浮动最有效的css写法
说起来呢,基本上只要你给容器div加了float的属性,就需要清除浮动来使页面显示正常,那么,到底有什么方法可以让浮动轻松清除呢? 可以用display:flex;替代,但是它对IE8,9支持不是很好 ...
CSS——如何清除浮动
众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div. ...
一天搞定CSS：清除浮动（float）--13
上一节已经说明了为什么要清除浮动了.这里我们就来解决浮动产生的各种问题. 为什么要清楚浮动? 地址:http://blog.csdn.net/baidu_37107022/article/detail ...

css浮动，清除浮动，溢出属性，定位，设置透明度

浮动>>>float

清除浮动

clear

通用解决浮动带来的影响方法

溢出属性>>>overflow

展示溢出实际应用场景之头像

定位(position)

相对定位>>>relative(了解即可)

绝对定位>>>absolute(常用)

固定定位>>>fixed(常用)

验证浮动和定位是否脱离文档流(原来的位置是否还保留)

设置对象的层叠顺序>>>Z-index

设置透明度>>>opacity(范围0-1)

实践>>>:博客园

css浮动，清除浮动，溢出属性，定位，设置透明度相关推荐

最新文章

热门文章