CSS浮动
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS浮动,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1757字,纯文字阅读大概需要3分钟。
内容图文
![CSS浮动](/upload/InfoBanner/zyjiaocheng/1039/170abd77879e4522b60fa4c1dd8562dc.jpg)
5 浮动
标准文档流
块级元素:独占一行
h1~h6 p div 列表。。。
行内元素:不独占一行
span a img strong
行内元素可以被包含在块级元素中,反之,则不可以~
5.2 display 却可以这样做
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display</title>
<!--
black 块元素
inline 行内元素
inline-block,是块元素,但是可以内联,在一行!
none 消失
float 浮动
-->
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
float:right;
/*float: both; 清除浮动*/
}
span{
width: 100px;
height: 100px;
border:1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>
5.3 float
1.左右浮动
5.4,父级边框塌陷的问题
clear
clear: right 右侧不允许有浮动元素
clear: left: 左侧不允许有浮动元素
clear: both 两侧不允许有浮动元素
clear: none 没有浮动
解决方案:
1.增加父级元素的高度
2.增加一个空的div标签清除浮动
<div class="clear"></div>
.clear{
clear: both;
margin: 0;
padding: 0;
}
3,overflow
在父级元素中增加一个 overflow:hidden;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow</title>
<style>
#content{
width: 150px;
height: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="content">
<img src="image/1.jpg" alt="">
<p>
指一个人发出的笑声,高兴开心欢乐时的状态,抒发快乐的心情,表现一个人很开心快乐的状态。
</p>
</div>
</body>
</html>
4.父类添加一个伪类: :after
#content:after{
content: "";
display: block;
clear: both;
}
小结:
- 浮动元素后面增加空div 。 简单,代码中尽量避免空div
- 设置父元素的高度。 简单,元素假设有了固定的高度,就会被限制
- overflow 简单,下拉的一些场景避免使用
- 父类添加一个伪类:after(推荐) 写法稍微复杂一点,但是没有副作用,推荐使用
5.5 对比
- display 方向不可控制
- float 浮起来的话会脱离标准文档流,所以要解决父级边框塌陷的问题 清空
内容总结
以上是互联网集市为您收集整理的CSS浮动全部内容,希望文章能够帮你解决CSS浮动所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。