float
This commit is contained in:
parent
9853dbdd91
commit
b8df71627e
93
csspress/demo/clearfloat.html
Normal file
93
csspress/demo/clearfloat.html
Normal file
@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 1000px;
|
||||
height: 300px;
|
||||
background: gold;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
/* width:60px;
|
||||
height: 60px; */
|
||||
background: red;
|
||||
/* background: rgba(255, 0, 0, 0.363); */
|
||||
/* float: left; */
|
||||
|
||||
|
||||
}
|
||||
|
||||
.box2 {
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
background: gray;
|
||||
border: 1px solid pink;
|
||||
color: white;
|
||||
/* float:right */
|
||||
float: left;
|
||||
}
|
||||
|
||||
.box4 {
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
background: blue;
|
||||
border: 1px solid pink;
|
||||
/* clear: left;
|
||||
这是哪个元素需要清除浮动哪个元素加clear
|
||||
*/
|
||||
}
|
||||
|
||||
.boxes{
|
||||
overflow: auto;
|
||||
/*
|
||||
这是通过Overflow:auto 清除浮动
|
||||
*/
|
||||
}
|
||||
.blank{
|
||||
clear:left
|
||||
}
|
||||
/*
|
||||
在浮动元素最后面加一个空的div 附上clear属性清除浮动
|
||||
*/
|
||||
|
||||
/* .boxes:after {
|
||||
content: '.';
|
||||
height: 0;
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
这是通过伪类清除浮动，必须加上content:"." 否则不起作用
|
||||
*/
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="boxes clearfix">
|
||||
<div class="box1">asaaaa</div>
|
||||
<div class="box2"></div>
|
||||
|
||||
<div class="box2">4</div>
|
||||
<div class="box2 blankdiv">5</div>
|
||||
<!-- <div class="box2" style="height: 180px;">6</div> -->
|
||||
<div class="blank"></div>
|
||||
</div>
|
||||
<div class="box4"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -46,6 +46,11 @@
|
||||
<div class="box1">asaaaa</div>
|
||||
<div class="box2"></div>
|
||||
<div class="box2"></div>
|
||||
<div class="box2"></div>
|
||||
<div class="box2"></div>
|
||||
<div class="box2"></div>
|
||||
<div class="box2"></div>
|
||||
|
||||
<!-- <div class="box1"></div>
|
||||
<div class="box1"></div>
|
||||
<div class="box1"></div>
|
||||
|
||||
@ -39,6 +39,7 @@
|
||||
<div id="div1">
|
||||
<div id="div11"></div>
|
||||
<div id="div12"></div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
50
csspress/demo/float2.html
Normal file
50
csspress/demo/float2.html
Normal file
@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.box{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: pink;
|
||||
}
|
||||
.box1{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
float: left;
|
||||
}
|
||||
.hr{
|
||||
width: 200px;
|
||||
}
|
||||
.zongjie{
|
||||
font-size:18px;
|
||||
font-weight: bold;
|
||||
color: red;
|
||||
}
|
||||
.zhu{
|
||||
color:black
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">你好</div>
|
||||
<p class="hr">我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字</p>
|
||||
|
||||
|
||||
<div class="box1">你好</div>
|
||||
<p class="hr">我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字</p>
|
||||
<!-- box1默认样式时，p标签的内容会出现在红色div的下方 -->
|
||||
|
||||
<p class="zongjie">总结：当box1加上float:left 时，如果文字的宽度不超过红色div的宽度 那么文字会在红色div的下面 如果文字宽度超过div的宽度，那么文字会环绕红色div</p>
|
||||
<div class="zongjie zhu">原因：浮动的破坏性在于切断Linebox(行盒)链，致使高度塌陷，由于浮动元素仍在dom树中，实体是看得见摸得着的，所以他占据的位置还是在的</div>
|
||||
<div class="zongjie zhu">解释:脱离文档流 是将元素从普通的布局排版中拿走，其他盒子定位的时候，会当做脱离文档流的元素不存在进行定位。但是，使用float 使元素脱离文档流时，其他盒子会无视这个元素，但其他盒子的文本依然会为这个元素让出位置，环绕在四周</div>
|
||||
</body>
|
||||
</html>
|
||||
87
csspress/demo/floatbtn.html
Normal file
87
csspress/demo/floatbtn.html
Normal file
@ -0,0 +1,87 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* inline-bliock方法： */
|
||||
.btn1 {
|
||||
display: inline-block;
|
||||
background: blue;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn3 {
|
||||
display: block;
|
||||
background: pink;
|
||||
}
|
||||
|
||||
/* float方法： */
|
||||
.btn2 {
|
||||
display: inline-block;
|
||||
background: red;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn{
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
.group1{
|
||||
margin-bottom: 30px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.wenzi{
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
</body>
|
||||
<div class="group1">
|
||||
group1:
|
||||
<div class="btn1">提交</div>
|
||||
<div class="btn1">提交提交提交提交提交提交提交提交</div>
|
||||
<div class="btn2">编辑</div>
|
||||
<p class="wenzi">这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字</p>
|
||||
</div>
|
||||
<div class="group2">
|
||||
group2:
|
||||
<div class="btn1">提交</div>
|
||||
<div class="btn1">提交提交提交提交提交提交提交提交</div>
|
||||
<div class="btn3">添加</div>
|
||||
<div class="btn2">编辑</div>
|
||||
<div class="btn2">编辑编辑编辑编辑编辑编辑编辑编辑编辑</div>
|
||||
</div>
|
||||
|
||||
<div class="group1">
|
||||
<div>
|
||||
group3:
|
||||
</div>
|
||||
<div class="btn1 btn">提交</div>
|
||||
<div class="btn1 btn">提交提交提交提交提交提交提交提交</div>
|
||||
<div class="btn2 btn">编辑</div>
|
||||
<p class="wenzi">这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字</p>
|
||||
</div>
|
||||
<div class="zongjie">
|
||||
group1中 btn1，btn2定义了inlineblock 实现了div的宽度随内容自适应且多个div水平排列
|
||||
display:inline-block 将元素显示为行内块状元素 设置该属性后 其他的行内块级元素会排列在同一行
|
||||
使其既有block设置高度的特性 又有inline的同行特性
|
||||
|
||||
group2中，btn1,btn2还是同样的Inlineblock btn3是block 这时候 btn3的元素会独占一行 前后元素会换行显示
|
||||
</div>
|
||||
</html>
|
||||
87
csspress/demo/search1.html
Normal file
87
csspress/demo/search1.html
Normal file
@ -0,0 +1,87 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
.box{
|
||||
width: 640px;
|
||||
}
|
||||
.search{
|
||||
width: 576px;
|
||||
height:32px;
|
||||
border: 2px solid #e2231a;
|
||||
}
|
||||
.searchcontent{
|
||||
width: 500px;
|
||||
|
||||
height:28px;
|
||||
padding-left: 15px;
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
.searchcontent:focus{
|
||||
outline: none;
|
||||
}
|
||||
.tuijian{
|
||||
width: 586px;
|
||||
/* height:200px; */
|
||||
background: white;
|
||||
border: 1px solid #ccc;
|
||||
position: relative;
|
||||
top:5px;
|
||||
left: -10px;
|
||||
}
|
||||
.tuijianitem{
|
||||
width:586px;
|
||||
height: 25px;
|
||||
cursor: default;
|
||||
/* border: 1px solid #ccc; */
|
||||
font-size: 12px;
|
||||
padding-left: 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.tuijianitem:hover{
|
||||
background: #ccc;
|
||||
}
|
||||
.btn{
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
background-color: #e2231a;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
float: right;
|
||||
position: relative;
|
||||
top: -35px;
|
||||
left:20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="left">
|
||||
<div class="search">
|
||||
<input type="text" class="searchcontent">
|
||||
<ul class="tuijian">
|
||||
<li class="tuijianitem">中华老字号</li>
|
||||
<li class="tuijianitem">营养零食</li>
|
||||
<li class="tuijianitem">休闲零食</li>
|
||||
<li class="tuijianitem">鲜花</li>
|
||||
<li class="tuijianitem">永生花</li>
|
||||
<li class="tuijianitem">鼠尾草</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="btn">搜索</div>
|
||||
</div>
|
||||
<div>会员</div>
|
||||
</body>
|
||||
</html>
|
||||
109
csspress/demo/search2.html
Normal file
109
csspress/demo/search2.html
Normal file
@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
.box{
|
||||
width: 654px;
|
||||
margin:10px auto;
|
||||
}
|
||||
.left{
|
||||
width: 549px;
|
||||
}
|
||||
.search{
|
||||
width: 546px;
|
||||
/* height:44px; */
|
||||
border: 2px solid #4e6ef2;
|
||||
border-radius: 10px 0 0 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.searchcontent{
|
||||
width: 500px;
|
||||
height:44px;
|
||||
padding-left: 15px;
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
border: none;
|
||||
margin: 0 auto;
|
||||
border-bottom: 2px solid silver;
|
||||
}
|
||||
.searchcontent:focus{
|
||||
outline: none;
|
||||
}
|
||||
.tuijian{
|
||||
width: 546px;
|
||||
/* height:200px; */
|
||||
/* border: 1px solid #ccc; */
|
||||
position: relative;
|
||||
top:5px;
|
||||
left: -2px;
|
||||
list-style:none;
|
||||
text-align: left;
|
||||
}
|
||||
.tuijianitem{
|
||||
width:586px;
|
||||
height: 25px;
|
||||
cursor: default;
|
||||
/* border: 1px solid #ccc; */
|
||||
font-size: 12px;
|
||||
padding-left: 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.tuijianitem:hover{
|
||||
background: #ccc;
|
||||
}
|
||||
.btn{
|
||||
width: 108px;
|
||||
height: 50px;
|
||||
background-color: #4e6ef2;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
border-radius: 0 10px 10px 0;
|
||||
float: right;
|
||||
/* margin-top: -200px; */
|
||||
position: relative;
|
||||
top: -50px;
|
||||
/* left:40px; */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="left">
|
||||
<div class="search">
|
||||
<input type="text" class="searchcontent" onfocus="shuruing()" onblur="end()">
|
||||
<ul class="tuijian" style="display:none">
|
||||
<li class="tuijianitem">中华老字号</li>
|
||||
<li class="tuijianitem">营养零食</li>
|
||||
<li class="tuijianitem">休闲零食</li>
|
||||
<li class="tuijianitem">鲜花</li>
|
||||
<li class="tuijianitem">永生花</li>
|
||||
<li class="tuijianitem">鼠尾草</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn">搜索</div>
|
||||
</div>
|
||||
<script>
|
||||
var menu=document.getElementsByClassName('tuijian')[0]
|
||||
var btn=document.getElementsByClassName('btn')[0]
|
||||
function shuruing(){
|
||||
menu.style.display="block"
|
||||
btn.style.top="-200px"
|
||||
}
|
||||
function end(){
|
||||
console.log(8009)
|
||||
menu.style.display="none"
|
||||
btn.style.top="-50px"
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
53
csspress/demo/search3.html
Normal file
53
csspress/demo/search3.html
Normal file
@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 300px;
|
||||
}
|
||||
.box1{
|
||||
margin:30px;
|
||||
}
|
||||
.menu{
|
||||
width: 300px;
|
||||
list-style: none;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.tuijianitem{
|
||||
cursor: pointer;
|
||||
height: 30px;
|
||||
}
|
||||
.tuijianitem:hover{
|
||||
background: #eeeeee;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box1">
|
||||
<div class="box">
|
||||
<input type="text" class="shuru" />
|
||||
|
||||
<span class="btn">搜索</span>
|
||||
</div>
|
||||
<ul class="menu">
|
||||
<li class="tuijianitem">中华老字号</li>
|
||||
<li class="tuijianitem">营养零食</li>
|
||||
<li class="tuijianitem">休闲零食</li>
|
||||
<li class="tuijianitem">鲜花</li>
|
||||
<li class="tuijianitem">永生花</li>
|
||||
<li class="tuijianitem">鼠尾草</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
92
csspress/demo/type.html
Normal file
92
csspress/demo/type.html
Normal file
@ -0,0 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
.box{
|
||||
margin:20px;
|
||||
cursor: default;
|
||||
}
|
||||
.left{
|
||||
list-style: none;
|
||||
float: left;
|
||||
}
|
||||
.item{
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
color: #666;
|
||||
text-indent: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.item:hover{
|
||||
color: #c81623;
|
||||
background: #eeeeee;
|
||||
}
|
||||
.right{
|
||||
width: 800px;
|
||||
height: 400px;
|
||||
float: left;
|
||||
background: gold;
|
||||
}
|
||||
.tag{
|
||||
padding: 5px 20px;
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
.tags{
|
||||
margin-top: 20px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.menu{
|
||||
margin-top: 30px;
|
||||
}
|
||||
.ads{
|
||||
float: right;
|
||||
margin-right: 40px;
|
||||
margin-top:40px;
|
||||
}
|
||||
.ad{
|
||||
width:60px;
|
||||
height:60px;
|
||||
background: black;
|
||||
border: 1px solid red;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<ul class="left">
|
||||
<li class="item">dynamix</li>
|
||||
<li class="item">voze</li>
|
||||
<li class="item">phigros</li>
|
||||
<li class="item">muse dash</li>
|
||||
</ul>
|
||||
<div class="right">
|
||||
<div class="tags">
|
||||
<span class="tag">tag1</span>
|
||||
<span class="tag">tag2</span>
|
||||
<span class="tag">tag3</span>
|
||||
<span class="tag">tag4</span>
|
||||
</div>
|
||||
<ul class="left menu">
|
||||
<li class="item">dynamix</li>
|
||||
<li class="item">voze</li>
|
||||
<li class="item">phigros</li>
|
||||
<li class="item">muse dash</li>
|
||||
</ul>
|
||||
<div class="ads">
|
||||
<div class="ad"></div>
|
||||
<div class="ad"></div>
|
||||
<div class="ad"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
100
csspress/demo2/searchlx.html
Normal file
100
csspress/demo2/searchlx.html
Normal file
@ -0,0 +1,100 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.searchbox {
|
||||
width: 658px;
|
||||
height: 44px;
|
||||
margin: 0 auto;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 546px;
|
||||
/* height: 44px; */
|
||||
border-radius: 10px 0px 0px 10px;
|
||||
float: left;
|
||||
border: 2px solid #4e6ef2;
|
||||
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 108px;
|
||||
height: 48px;
|
||||
background: #4e6ef2;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
border-radius: 0 10px 10px 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.shuru {
|
||||
width: 480px;
|
||||
height: 44px;
|
||||
border: none;
|
||||
outline: none;
|
||||
margin-left: 20px;
|
||||
border-bottom: 2px solid #c4c7ce;
|
||||
}
|
||||
.shishenmen{
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.shishen{
|
||||
font-size: 15px;
|
||||
height: 30px;
|
||||
margin-left:20px;
|
||||
}
|
||||
.shishen:hover{
|
||||
color: rgb(78, 110, 242);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="searchbox">
|
||||
<div class="left">
|
||||
<input type="text" class="shuru" onfocus="shuruing()" onblur="end()"/>
|
||||
<ul class="shishenmen" style="display: none;">
|
||||
<li class="shishen">阴阳师</li>
|
||||
<li class="shishen">大天狗</li>
|
||||
<li class="shishen">茨木</li>
|
||||
<li class="shishen">青行灯</li>
|
||||
<li class="shishen">酒吞</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class=" btn">搜索</div>
|
||||
</div>
|
||||
<script>
|
||||
// var ss=document.getElementsByClassName('shishen')[0]
|
||||
// var shishen=document.getElementsByClassName('shishenmen')
|
||||
// console.log(ss)
|
||||
// console.log(shishen)
|
||||
function shuruing(){
|
||||
console.log(900)
|
||||
var ss=document.getElementsByClassName('shishen')[0]
|
||||
var shishen=document.getElementsByClassName('shishenmen')[0]
|
||||
console.log(ss)
|
||||
console.log(shishen)
|
||||
shishen.style.display="block"
|
||||
}
|
||||
|
||||
function end(){
|
||||
var shishen=document.getElementsByClassName('shishenmen')[0]
|
||||
shishen.style.display="none"
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
csspress/float.assets/image-20210120091803284.png
Normal file
BIN
csspress/float.assets/image-20210120091803284.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
BIN
csspress/float.assets/image-20210120092034942.png
Normal file
BIN
csspress/float.assets/image-20210120092034942.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 291 KiB |
BIN
csspress/float.assets/image-20210120092428804.png
Normal file
BIN
csspress/float.assets/image-20210120092428804.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
csspress/float.assets/image-20210120102415347.png
Normal file
BIN
csspress/float.assets/image-20210120102415347.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
csspress/float.assets/image-20210120102812428.png
Normal file
BIN
csspress/float.assets/image-20210120102812428.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
csspress/float.assets/image-20210120102917893.png
Normal file
BIN
csspress/float.assets/image-20210120102917893.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
csspress/float.assets/image-20210120103153541.png
Normal file
BIN
csspress/float.assets/image-20210120103153541.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
csspress/float.assets/image-20210120103339657.png
Normal file
BIN
csspress/float.assets/image-20210120103339657.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
csspress/float.assets/image-20210120103521672.png
Normal file
BIN
csspress/float.assets/image-20210120103521672.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
csspress/float.assets/image-20210120103840173.png
Normal file
BIN
csspress/float.assets/image-20210120103840173.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
@ -1,3 +1,242 @@
|
||||
# 浮动（float）
|
||||
|
||||
|
||||
## 为什么需要浮动
|
||||
|
||||
- 最初浮动是为了像word有文字环绕，图片嵌入的功能出现的
|
||||
|
||||
|
||||
|
||||
- 让多个块级元素水平排列成一行
|
||||
|
||||
|
||||
|
||||
- 实现两个块级盒子的左对齐和右对齐
|
||||
|
||||
|
||||
|
||||
## 浮动的本质
|
||||
|
||||
1. 浮动的包裹性
|
||||
|
||||
抛开浮动的破坏性先不谈，浮动就是个带有方位的display:inline-block的属性。
|
||||
display:inline-block 某种意义上的作用就是包裹，浮动也有类似的效果
|
||||
|
||||
但是 float和display:inline-block 无法完全等同
|
||||
|
||||
原因：
|
||||
|
||||
- float可以自定义方向（从左往右或从右往左） inline-block只有从左到右一个水平排列的方向
|
||||
- float会使周围文字环绕元素 inline-block不会
|
||||
|
||||
2. 浮动的破坏性
|
||||
|
||||
浮动会破坏正常的inline boxes
|
||||
|
||||
什么是inline boxes?
|
||||
|
||||
|
||||
|
||||
inline boxes不会让内容成块显示，而是排成一行，如果外部含inline属性的标签(span,a,cite等)，则属于inline boxes，如果是个光秃秃的文字，则属于匿名inline boxes。
|
||||
|
||||
Linebox
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
正常的图文混排：
|
||||
|
||||
不加float:
|
||||
|
||||
|
||||
|
||||
（加入float之后）：
|
||||
|
||||
|
||||
|
||||
正常情况下，图片自身就是个inline boxes，与两侧的文字inline boxes共同组成了line boxes，但是，一旦图片加入了浮动，情况就完全变了。我认为是浮动彻底破坏了img图片的inline boxes特性，至少有一点我可以肯定，图片的inline boxes不存在了。被恶魔附体，变身了，而这个恶魔就是浮动。一旦图片失去了inline boxes特性就无法与inline boxes的文字排在一行了，其会从line boxes上脱离出来，跟随自身的方位属性，靠边排列
|
||||
|
||||
## float 使用
|
||||
|
||||
```
|
||||
float:left 左浮动
|
||||
|
||||
float:right 右浮动
|
||||
```
|
||||
|
||||
float:left 实现块级元素水平排列：
|
||||
|
||||
|
||||
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
.box{
|
||||
width: 1000px;
|
||||
height: 300px;
|
||||
background: gold;
|
||||
margin: 20px;
|
||||
}
|
||||
.box1{
|
||||
/* width:60px;
|
||||
height: 60px; */
|
||||
background: red;
|
||||
/* background: rgba(255, 0, 0, 0.363); */
|
||||
/* float: left; */
|
||||
|
||||
|
||||
}
|
||||
.box2{
|
||||
width: 120px;
|
||||
height:80px;
|
||||
background: gray;
|
||||
border: 1px solid pink;
|
||||
/* float:right */
|
||||
float: left;
|
||||
}
|
||||
.a{
|
||||
/* width: 70px;
|
||||
height: 70px;
|
||||
border: 1px solid blue;
|
||||
background: pink; */
|
||||
clear: right;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="box1">asaaaa</div>
|
||||
<div class="box2"></div>
|
||||
<div class="box2"></div>
|
||||
<div class="box2"></div>
|
||||
<div class="box2"></div>
|
||||
<div class="box2"></div>
|
||||
<div class="box2"></div>
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 清除浮动
|
||||
|
||||
```
|
||||
clear:left(清除左浮动)/right(清除右浮动)/both(清除左浮动+右浮动)
|
||||
```
|
||||
|
||||
哪边不允许有浮动元素，clear就是对应方向的值，两边都不允许就是`both`
|
||||
|
||||
方案1：给需要清浮动的元素加clear属性
|
||||
|
||||
```
|
||||
.box4{
|
||||
width: 120px;
|
||||
height:80px;
|
||||
background: blue;
|
||||
border: 1px solid pink;
|
||||
clear: left;
|
||||
}
|
||||
```
|
||||
|
||||
方案2：
|
||||
|
||||
html:
|
||||
|
||||
```
|
||||
<div class="box">
|
||||
<div class="box1">asaaaa</div>
|
||||
<div class="box2"></div>
|
||||
|
||||
<div class="box2">4</div>
|
||||
<div class="box2">5</div>
|
||||
<!-- <div class="box2" style="height: 180px;">6</div> -->
|
||||
<div class="blank"></div>
|
||||
<div class="box4"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
css:
|
||||
|
||||
```
|
||||
.blank{
|
||||
clear: left;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
方案3：使用伪元素清除浮动
|
||||
|
||||
css:
|
||||
|
||||
```
|
||||
.boxes:after {
|
||||
content: '.';
|
||||
height: 0;
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
```
|
||||
|
||||
html:
|
||||
|
||||
```
|
||||
<div class="box">
|
||||
<div class="boxes clearfix">
|
||||
<div class="box1">asaaaa</div>
|
||||
<div class="box2"></div>
|
||||
|
||||
<div class="box2">4</div>
|
||||
<div class="box2 blankdiv">5</div>
|
||||
<!-- <div class="box2" style="height: 180px;">6</div> -->
|
||||
<div class="blank"></div>
|
||||
</div>
|
||||
<div class="box4"></div>
|
||||
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
|
||||
方案4：overflow 清除浮动
|
||||
|
||||
html：
|
||||
|
||||
```
|
||||
<div class="box">
|
||||
<div class="boxes clearfix">
|
||||
<div class="box1">asaaaa</div>
|
||||
<div class="box2"></div>
|
||||
|
||||
<div class="box2">4</div>
|
||||
<div class="box2 blankdiv">5</div>
|
||||
<!-- <div class="box2" style="height: 180px;">6</div> -->
|
||||
<div class="blank"></div>
|
||||
</div>
|
||||
<div class="box4"></div>
|
||||
|
||||
</div>
|
||||
```
|
||||
|
||||
css:
|
||||
|
||||
```
|
||||
.boxes{
|
||||
overflow: auto;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user