float属性

  1. 浮动的实现
  1. 浮动的副作用
# 1. 针对父元素:
注意:如果一个元素里只有浮动元素,那它的高度会是0.如果你想要的它自适应即包含所有浮动元素,那你需要清除它的子元素。
一种方法叫做clearfix,即clear一个不浮动的::after伪元素。(问题是:简言之父元素有浮动的子元素,父元素的高度没设置,那么父元素的高度就为0)

方法一:
#container::after{
  content: '';
  display: block;
  clear: both;
}

方法二:
#container::after{
  overflow: hidden;(可以撑开父元素的高度,但如果父元素没有设置宽度,那么父元素就会独占一行,因此须设置父元素宽度)
}



# 2. 针对同级元素
 clear  属性清除浮动的元素对下个兄弟元素定位的影响(打破元素的横向排列)。
 clear: left;表示应用该属性该元素左侧不允许有元素。
 clear: right;表示应用该属性的元素右侧不允许有元素。
  1. 清除浮动
# 一:css为什么要清除浮动

1.很多情况下,如果我们使用了float特效,出现margin,padding设置不能正确显示,浮动会导致父级子级之间设置了padding,导致了属性不能正常传达,导致margin不能正常显示,所以我们要清除浮动。
2.导致背景不能显示,如果对父级设置了背景属性,导致父级不能撑开,会影响到背景图片不能正常打开。
3.边框不能撑开,由于子级使用了浮动效果,并且已经产生了浮动,父级不能撑开,所以影响边框不会随着内容的变化而变化。

# 二:浮动如何清除?清除浮动流程

1.首先对父级进行设置css高度进行清除,一般情况下,我们对高度设置一个高度,把内容高度设置成100px,上下框为2px,这样一来,父级的总体高度就是102px。我们使用高度样式,但是前提我们要计算好内容的高度。
2.利用clear:both属性,进行清除浮动,我们可以在div中放入一个class="clear样式,就可以清除浮动。
3.对父级div进行定义属性,我们对父级css选择器定义一个overflow:hidden样式,就可以清除父级产生的浮动。


posted @ 2021-05-05 07:07  该显示昵称已被使用了  阅读(103)  评论(0编辑  收藏  举报