浮动流排版:清楚默认边距和清除浮动的5种方式

浮动流 是一种半脱离标准的排版方式 注意点: 1.浮动流中没有居中对齐,也没有center这个取值 2.浮动流中margin: 0 auto;是不能使用的   特点: 1.浮动流是不区分块级元素、行内元素和行内块级元素,并且他们都会可以设置长宽高   浮动元素脱标和它带来的影响 什么是浮动元素脱标? 一个元素浮动之后,它就像是从标准流中删除了一样,这个就称之为浮动元素的脱标   它会有什么影响? 当一个元素浮动后,后跟紧跟后面的一个元素如果没有浮动,那么这个元素就会盖住紧跟着的那个没有浮动的元素   浮动元素的贴靠现象

什么是浮动元素贴靠现象?
1.如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示
2.如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠
3.如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的边框底下

  浮动元素字围现象 浮动的元素不会盖住没有浮动元素中的文字,没有浮动元素中的文字会给浮动的元素让位置,字围效果可以用来做图文混排 清除浮动方式 例如下面代码,会向下面这样显示,因为它的p标签是浮动,div已经被清除了margin和padding,所以没有占面积,如果我们要清除浮动,下面就介绍清除方式

aaaaa

bbbbbbb

cccccc

1.给div设置高度,例如给a1设置100的高度,后面的p标签就不会找它,但是因为我们在开发能不设置高度,就不要高度(这个方法不常用) 2.给p标签添加clear: left;,就会向下面这样显示,clear有both(两边都不要浮动),left(左不要浮动),right(右边不要浮动) 3.内墙法和外墙法 他们的不同之处和相同点 他们两个共同点都是隔开两个元素,都需要如下的一个div代码,都可以让第二个盒子设置margin-top属性

不同点 1.内墙法要在内部元素设置

,外墙法则是在两个块级元素之间设置 2.内墙法可以让第一个元素设置margin-bottom,而外墙法不可以 3.内墙法可以撑起它设置的那个盒子的高度,而外墙法不可以   4.伪元素选择器

我是文字

div::after 在div标签后面添加元素,div::before  在div标签前面添加元素

69-清除浮动方式四