CSS笔记(一)浮动

149 阅读1分钟

浮动:可以设置元素,脱离正常的文档流,向左或向右靠近父元素的边缘或者是设置了浮动的其他元素的边缘靠拢。

给需要的元素添加浮动

{
float: left/right;}

浮动的优点:

  • 浮动可以解决文字包围图片的问题
  • 可以使多个块级盒子在一行内排列
  • 浮动可以解决莫名其妙的间隔问题
  • 浮动可以向右或者向左进行排版对其

但是浮动也会存在**高度塌陷**问题!

解决塌陷问题:

  • 给父元素设定一个高度(但是有些时候父元素高度不确定)
  • 添加一个空子元素,设置它的属性

    .clear {
        clear: both;
    }

  • 最佳解决方案,伪元素清楚浮动,添加一个类,谁需要清楚浮动给谁加上即可。

    .clear:after {
    content:'';
    display: block;
    clear: both;
    }