CSS浮动
2021-06-01 12:04
阅读:839
YPE html>
标签:设置 char one lang spl 对比 flow clear content
5 浮动
标准文档流
块级元素:独占一行
h1~h6 p div 列表。。。
行内元素:不独占一行
span a img strong
行内元素可以被包含在块级元素中,反之,则不可以~
5.2 display 却可以这样做
display
div块元素
span行内元素
5.3 float
1.左右浮动
5.4,父级边框塌陷的问题
clear
clear: right 右侧不允许有浮动元素
clear: left: 左侧不允许有浮动元素
clear: both 两侧不允许有浮动元素
clear: none 没有浮动
解决方案:
1.增加父级元素的高度
2.增加一个空的div标签清除浮动
.clear{
clear: both;
margin: 0;
padding: 0;
}
3,overflow
在父级元素中增加一个 overflow:hidden;
overflow
指一个人发出的笑声,高兴开心欢乐时的状态,抒发快乐的心情,表现一个人很开心快乐的状态。
4.父类添加一个伪类: :after
#content:after{
content: "";
display: block;
clear: both;
}
小结:
- 浮动元素后面增加空div 。 简单,代码中尽量避免空div
- 设置父元素的高度。 简单,元素假设有了固定的高度,就会被限制
- overflow 简单,下拉的一些场景避免使用
- 父类添加一个伪类:after(推荐) 写法稍微复杂一点,但是没有副作用,推荐使用
5.5 对比
- display 方向不可控制
- float 浮起来的话会脱离标准文档流,所以要解决父级边框塌陷的问题 清空
CSS浮动
标签:设置 char one lang spl 对比 flow clear content
原文地址:https://www.cnblogs.com/202116xi/p/14527471.html
评论
亲,登录后才可以留言!