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

float高度塌陷问题解决方案

时间:2020-02-05 13:23:36      阅读:65      评论:0      收藏:0      [点我收藏+]

标签:dde   contex   mat   副作用   块元素   text   区域   nbsp   for   

第一种方案 BFC(Block Formatting Context)

  块级格式化环境/布局环境

  BFC是CSS中的一个隐含属性,开启BFC该元素会变成一个独立的布局区域

  元素开启BFC的特点:

  1.开启BFC元素不会被浮动元素覆盖

  2.开启BFC元素子元素和父元素外边距不会重叠  

  3.开启BFC的元素可以包含浮动子元素

  开启BFC的方式:

  1.设置元素的浮动(不推荐)

  2.将元素设置为行内块元素(不推荐)

  3.将元素的overflow设置为一个非visible的值(副作用较小)

    常用方式为overflow:hidden/auto;

第二种方式:

  clear属性作用:消除浮动元素对当前元素所产生的影响。

  可选值:left: 消除左侧浮动元素对当前元素的影响

      right:消除右侧浮动元素对当前元素的影响

      both: 消除两侧中最大影响的那侧

  示例

  .box1::after {

  content:"“;

  display:block;

  clear:both;

}

 

float高度塌陷问题解决方案

标签:dde   contex   mat   副作用   块元素   text   区域   nbsp   for   

原文地址:https://www.cnblogs.com/kukai/p/12263195.html

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