float clear
Posted rosendolu
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了float clear相关的知识,希望对你有一定的参考价值。
Float
float 属性的原本作用是:
为了实现文字环绕效果
float 父元素高度塌陷实现文字环绕效果
float 固定一列宽的自适应布局
float 多列布局`
float 固定一列宽的自适应布局
<div class="float_layout--adaptive_layout">
<div class="flaot_bar">float layout</div>
<div class="adaptive_bar">adaptive bar</div>
</div>
/* float_layout--adaptive */
.flaot_bar {
width: 100px;
float: left;
border: 2px solid red;
}
.adaptive_bar {
padding-left: 100px;
border: 2px dotted green;
}
float 多列布局
<div class="multi_column_layout">
<a class="pre" href=""><<previous </a>
<a class="next" href="">next>></a>
<h2 class="title">tile</h2>
</div>
.multi_column_layout {
border: 1px solid black;
}
.pre {
float: left;
}
.next {
float: right;
}
.title {
margin: 0 200px;
text-align: center;
}
clear
元素盒子的边不能和
前面的
浮动元素相邻
clear 属性只对块级元素生效
::after
等伪元素默认是内联元素
。清除浮动需要添加display:table
ordisplay:block
clear:both
clear 属性只对块级元素生效,伪元素需添加display:table;
::after {
content:'';
display:table;
clear:both;
}
以上是关于float clear的主要内容,如果未能解决你的问题,请参考以下文章