Clear Float

特别声明:本站已开启付费阅读,年费会员价 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开。换句简单好理解的话来说,假如你在写CODE时,其中div.A(这个就是说页面中有一个div,并且把其命名为class="A")中包含了两个或多个子元素div.B,div.C,div.D(这里我以三个为例),并且此时div.B和div.C进行浮动,而div.D不进行任何浮动,此时你可以看到父元素div.A高度仅靠div.D来撑开其高度,如果您将div.A所有子元素进行浮动,当你没有清除内部浮动时,此时会导致浮动的父元素div.A无法自动撑开本身的高度。也就是说:当一个元素是浮动的,如果没有关闭浮动时,其父元素不会包含这个浮动元素,因为此时浮动元素从文档流中脱离。下面我们先来看看这两种现像的实例:

HTML Code:

  <div class="demo A">
    <div class="demoB demoFloat">float left</div>
    <div class="demoC demoFloat">float right</div>
    <div class="demoD demoFloat">not float</div>
  </div>

给上面的加上一些基本的样式:

 
  .demo {
     width: 300px;
     border: 1px solid red;
  }
 .demoFloat {
     background: green;
     margin: 0;
 }
 .demoC {
    background: orange;
 }
 .demoD {
    background: lime;
    border: 2px solid blue;
 }

下面先来看第一种,div.B和div.C进行浮动,而div.D不进行浮动

 .demoB {
   float: left;
 }
 .demoC {
   float: right;
 }

效果:

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/clear-float

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部