码迷,mamicode.com
首页 > 其他好文 > 详细

float clear

时间:2019-01-20 00:11:45      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:next   content   lock   block   spl   table   center   text   col   

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="">&lt;&lt;previous </a>
  <a class="next" href="">next&gt;&gt;</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 or display:block
  • clear:both

clear 属性只对块级元素生效,伪元素需添加display:table;

::after {
  content:'';
  display:table;
  clear:both;
}

float clear

标签:next   content   lock   block   spl   table   center   text   col   

原文地址:https://www.cnblogs.com/rosendolu/p/10293711.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!