浮动

浮动流中要注意的是;

1;在标准流中,元素中的内容可以撑开他父元素的高度的;

2;在浮动流中,元素中的内容不能撑开父元素的高度;

3;在浮动流中如果他的父元素不设置高度;那么浮动后;所有元素都在一行显示;如果想不让他在一行显示、那么给他父元素设置一个高度就行了。

清除浮动

clear: 是用来清除浮动的;他的取值有 both;left ;right ;

要注意的是;用了clear:both清除浮动后;margin属性就会失去作用

那么我们怎么才能既能用浮动;而有不让margin-top和margin-bottom失效?

1;外墙法;就是在两个盒子中间在额外的添加几个块级元素;并要设置这个块级元素的clear属性为both;这样我们就可以设置这个块级元素的高度来分开这个两盒子;也可以在第二个盒子中设置margin-top:属性;但是第一个盒子的margin-bottom属性还是无效的;

2;内墙法;就是在第一个盒子的子元素最后添加一个块级元素;然后也要设这个块级元素的clear:both;那么这样这两个盒子的margin属性都能用; 这是什么原因?这个是因为;添加的这个块级元素在第一个盒子中的元素浮动后;这个块级元素还能撑开第一个盒子的高度;

你可能感兴趣的:(浮动)