第三节 浮动与定位

1.1

1.1

浮动

在使用inline-block能够使元素排成一行，但是问题是什么？ inline-block 会使元素解析一个空格字符，会产生vertical-align；
使用浮动【浮力】：
使元素脱离文档流，按照指定（左右）方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
文档流:是文档中可显示对象在排列时所占用的位置/空间(在页面中占位置)
脱离文档流：在页面中不占位置。
使用浮动时需要注意的情况：

• 1.如果只给前面的元素浮动，后面的元素会占据它的位置
• 2.给了浮动的元素，只会影响后面的元素,不会对使用浮动元素的前一个元素造成影响
• 3.如果父级宽度太窄，无法容纳所有的浮动元素，无法容纳的浮动元素会往下掉
• 4.如果浮动元素的高度不同，父级宽度太窄，那么当它们往下掉时可能被其它浮动元素’卡住’

浮动特点

• 会使块级（横排显示）
• 2.内联 支持宽高【会使行内元素变成块级元素；】
• 3.没加宽度之前，块级元素独占一行，宽度为100%；使用浮动后，由内容来撑开宽度，高度；
• 4.支持margin,padding,宽度与高度等元素,但不支持margin:auto;
• 5.提升层级半层;

解决浮动的方式

假设是父级高度由内容撑开的情况，使用浮动后，父级会出现高度坍塌的情况；需要解决高度坍塌的问题，方式如下：

• 1.父级设置高度；
• 2.使用overflow:hidden;【原理：BFC原理】
• 3.在后面元素加一个长度特别长的文本卡住 【治根不治本】
• 4.只需在子级尾部加一个块级元素，添加clear:both;

  .p1{
    background-color: #0ff;
  clear: both; /* 清除浮动【清除左浮动与右浮动】 */
  }
  <div class='clearfixed'>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <!-- <b class='p1'></b> -->
    </div>

5.使用伪元素

.clearfixed::after{
    content: "";
  display:block;
  clear: both;
}
<ul  class='clearfixed'>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>