浮动布局

·  阅读 214

浮动初衷是为了实现字围(新闻),后面才发现,浮动可以让多个男标签并排显示

浮动布局特点

1,在一个父元素内部,如果一个元素浮动了,那么它就脱离了标准文档流,后面的元素就让向上排

2,浮动并没有完全地脱离了标准文档流(破坏性--->flex),如果后面的元素内部有文字,这些文字会环绕在浮动元素的周伟,产生字围。

3,如果多个元素浮动了,那么这们就会并排显示,如果都是同一个方向的浮动,它们会紧紧地贴在一起。

4,如果一个元素浮动了,先向上移动,直到贴靠到父元素的边界,接着,如果是左浮动,就向左移动,直到移动到父元素的左边界,如果是向右浮动,就向右移动,直接移动到父元素的右边界。 5,如果一个元素没有设置高度,它的高度是靠里面的内容撑起来的。如果父元素内部元素都浮动了,那么会造成父元素的高度塌陷(即撑不起来了)。

6,如果元素浮动了,那么它会造成影响:造成父元素高度塌陷。解决:显示加高度(加高法) 小偏方(overflow:hidden)

7,如果元素浮动了,它也会造成对后面的兄弟元素影响。解决:clear:both/left/right

8,应用:实现左右布局 小导航 多个规则盒子水平排列(行内块)

9,当一个浮动起来的男盒子,没有设置width,那么这个盒子的宽高会尽可能小,小到包裹住它里面的内容,这叫包裹性,

10,如果一个元素浮动了,它会悄悄地做一个变性手术。如果一个女盒子浮动了,那么就可以设置宽高了,相当于把它变成男标签。

11,如果父元素也浮动了,那么就不会出现高度塌陷了。

12,如果有左浮动,又有右浮动,那么你需要把右浮动的元素写在左左浮动的前面 ??

13,写三个盒子,利用27种情况去讨论最后的显示。

14,浮动元素会从标准文档流中半脱离出来。证明:字围

15,一个元素浮动了,那么它也是受父元素的控制。当父元素宽度变小时,装不下所有的子元素时,后面的子元素有贴靠性。当父元素小到极限时,里面的浮动的子元素宽度是不会改变的。

元素浮动会造成影响(清除浮动):

1,对父元素造成的影响(父元素高度塌陷)

解决:

1 显示加高度(加高法)

2 小偏方(overflow:hidden)

3 clear:both

加高法:简单 基本不用 大部分情况情况下,父元素的高度是需要子元素撑起来

overflow:hidden : 简单 使用了overflow:hidden 父元素的高度会随着子元素的高度变化而变化 overflow:hidden本职工作是用来处理溢出

在使用过程中,需要注意子元素如果想要超出父元素高度,此时overflow:hidden就不适合了。

clear:both 在所有子元素后面加一个空的div 在这个div上面加clear:both ---> 内qiang法 优点:clear:both专业清除浮动的 缺点:多写一个代码

2,对后面兄弟元素造成的影响 兄弟元素会向上移动 解决:在受影响的元素上面的加 clear:both

项目中最常用清除浮动的方法: 利用伪元素 after 说白了,就是写一个清除浮动的类,如下: .clear:after{content=""; display:block; clear:both; height:0; overflow:hidden;}

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改