清除浮动+多余文字...代替

浮动float

浮动元素对非浮动元素的影响

1. 非浮动元素会占用浮动元素原来的空间

2. 如果非浮动元素里面有文本，那么文本会被浮动元素给挤出来

   实现图文混排，图片浮动，非浮动元素的文本会围绕着图片进行排列

3. 注意：子元素浮动，父元素的高度会塌陷（原因是子元素脱离了文档流而父元素没有设置固定高度导致的）

清除浮动影响

• 作用：清除浮动元素对非浮动元素的影响，通过clear来清除

• 语法：

  clear:left | right | both；
  

  • left:清除左浮动的影响
  • right：清除右浮动的影响
  • both：同时清除左浮动和右浮动的影响

• 清除浮动的方法：

  1. 给受影响的元素添加clear：both

     语法：

     clear : left | right | none; 
     

     • left 清除左浮动对元素造成的影响
     • right 清除右浮动对元素造成的影响
     • both 清除两边浮动对元素造成的影响

  2. 通过空白div添加clear属性将浮动元素和非浮动元素给分隔开

     1. 添加一个空的div将浮动区域和标准文档流排列的区域分割

        <style>
            .clear{
                clear:both;
            }
        </style>
        <div class="clear"></div>
        

  3. 通过<br clear="all">将浮动元素和非浮动元素分隔开

     <br clear="all">
     

  4. 父元素添加伪元素选择器可以动态添加一个子元素，完成清除浮动的操作（推荐使用）

     .clearfix::after{
         content:"";
         display:block;
         clear:both;
     }
     

  5. 取消浮动的影响：给父元素添加overflow:hidden;可以解决子元素浮动父元素高度塌陷的问题

     将父元素变成一个BFC容器，容器里面的元素如何排列不会影响到容器外面的元素

多余文字隐藏，用…代替

例如：jq22.com中间部分内容区域超出部分隐藏设置

文字放在p标签或者span标签内，不允许放在块级元素中

1. 只显示单行文本，多余文字隐藏，用…代替

   /* 规定文字不换行 */
   white-space: nowrap;
   /* 超出部分隐藏 */
   overflow: hidden;
   /* 多余用...代替 */
   text-overflow: ellipsis;
   

2. 显示多行文本， 多余文字使用…代替

   /* 老版本设置弹性盒子 */
   display: -webkit-box;
   /* 设置里面内容的排列方式 */
   -webkit-box-orient: vertical;
   /* 设置显示几行文本 */
   -webkit-line-clamp: 2;
   /* 溢出隐藏隐藏 */
   overflow: hidden;