浮动

浮动流中要注意的是;

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属性都能用; 这是什么原因?这个是因为;添加的这个块级元素在第一个盒子中的元素浮动后;这个块级元素还能撑开第一个盒子的高度;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 971评论 0 2
  • 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流是指元素在排列布局中所占用的位置。具体来说就是页面...
    婷楼沐熙阅读 1,833评论 3 9
  • 原文地址:浮动与清除浮动 浮动 浮动的概念 浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素...
    薛普定朗谔克阅读 786评论 3 14
  • 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征: 脱离正常文档流,沿其容器的左侧...
    _Dot912阅读 739评论 0 3