css-浮动/清除float/overflow/vertical-align
1 float属性
浮动 float 可以让盒子并排,并且可设置宽高,之间无空白空隙
默认值 float:none;
特点:1)相互贴靠 贴靠时,后边的会往前找可以贴靠的兄弟,若空间不够,则继续向前查找
2)浮动元素可以设置宽高
3)脱离标准流(简称 脱标) 标准流--文档中默认规定的各元素特性 (浮动元素已经不区分 块、行内、行内块 元素了)
浮动会对网页布局造成影响: 浮动元素可能会对后续元素布局产生影响,所以一般清除浮动
清除浮动的方法:1)给浮动的元素的父亲设置高度
不灵活 需要提前知道子元素的高;一般父亲是靠儿子撑开的
2) 给父亲增加一个子元素,给子元素设置一个属性clear:both
会增加一个html结构 一般尽量少一些html结构,否则影响页面渲染的性能
3)overflow:hidden 本意:隐藏多余的 东西
给父级添加该属性可以清除浮动
4)第二种方法升级 用css给父级添加一个伪元素
优点:可清除浮动,且不增加html结构 缺点:不能复用
.wrap:after{
contant:' ';
display:block;
clear:both;
}
5) 用class类解决 ,可复用 ,但是有兼容性问题
.clearfix:after{ ie7以下不兼容
contant:' ';
display:block;
clear:both;
}
.clearfix{ 低版本专用 eg:ie6
*zoom:1;
}
<!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> /* 浮动的元素 可能会对后续元素布局产生影响,所以一般清除浮动 清除浮动方法: 1 给浮动元素的父亲设置高度-----有高度的盒子可以关闭浮动 缺点 :不灵活 该方法需要提前知道儿子的高度;通常情况下,父亲靠儿子撑开 2 clear:both 在父亲末尾添加一个元素 给这个元素设置属性clear:both 可以清除浮动,并且父亲的高度也被撑开 缺点:多了 html结构 宁可多css代码,html结构尽量少,否则影响页面渲染 3 overflow:hidden; 原始作用:将多余的东西隐藏 给浮动元素的父亲增加一个属性 overflow:hidden; 4 用css加元素 即第二种方法的升级 用css 在 父级增加一个伪元素 优点:清除浮动,且不会增加 html结构 缺点:不能复用 .wrap:after{ content: ''; 伪元素不要内容,但 一定要写 display: block; clear: both; } 5 最优方法 用class类解决,可复用 ie7以下不兼容 after伪元素 */ *{ padding: 0; margin: 0; } .wrap{ border: 4px solid blue; /* height: 200px; */ /* overflow: hidden; */ } .wrap div.box1, .wrap div.box2{ width: 200px; height: 200px; float: left; } .wrap .box1{ background-color: salmon; } .wrap .box2{ background-color:red; } .wrap2{ widows: 300px; height: 200px; background-color: seagreen; } /* .cleardiv{ clear: both; } */ .wrap:after{ content: ''; display: block; /*不写时 添加的默认为行内元素*/ clear: both; } /* after 伪元素 ie7以下不兼容 */ .clearfix:after{ content: ''; display: block; clear: both; } /* 低版本浏览器专用 eg:ie6 */ .clearfix{ *zoom: 1; } </style> </head> <body> <div class="wrap clearfix"> <div class="box1">box1</div> <div class="box2">box2</div> <!-- <div class="cleardiv"></div> --> </div> <div class="wrap2"></div> </body> </html>
overflow 和 vertical-align属性的用法
<!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> .box{ border: blueviolet 2px solid; width: 400px; height: 100px; /* 让溢出的内容隐藏 */ overflow: hidden; /* 默认值 显示 */ overflow: visible; /* 滚动 显示滚动条 溢出可以显示滚动条,否则不可用 */ overflow: scroll; /* 内容溢出则显示滚动条 不溢出不显示滚动条 */ overflow:auto; } /* 行内元素 行内块元素 对齐方式 文字与图片 垂直 方向的对齐方式 图片与图片 垂直方向的对齐方式 */ img.img1{ /* 默认值 基线对齐 */ vertical-align: baseline; vertical-align: middle; vertical-align: top; vertical-align: bottom; } </style> </head> <body> <!-- overflow 示范 --> <div class="box"> 这是内容这是内容这是内容这是内容这是内容这是内容 这是内容这是内容这是内容这是内容这是内容这是内容 这是内容这是内容这是内容这是内容这是内容这是内容 这是内容这是内容这是内容这是内容这是内容这是内容 这是内容这是内容这是内容这是内容这是内容这是内容 这是内容这是内容这是内容这是内容这是内容这是内容 这是内容这是内容这是内容这是内容这是内容这是内容 这是内容这是内容这是内容这是内容这是内容这是内容 </div> <!-- vertical-align 示范 --> <span>123</span> <div class="box2"> <img class="img1" src="dog.jpeg" alt="" height="50px"> <img src="person.jpg" alt="" height="50px"> </div> </body> </html>