浮动的相关知识

最新推荐文章于 2024-07-18 17:34:14 发布

is______

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量278

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/is______/article/details/127587053

版权

浮动

为什么要使用浮动？

可以让元素同行显示，并且没有兼容问题。

怎么让盒子同行显示？

display：inline-block

缺点：盒子和盒子之间会产生5px的间距，存在兼容性问题，ie7及以下不能同行显示
W3C提供的浮动 float

浮动的属性取值

float：left; 左浮动

取值：
- left：左浮动
- right：右浮动

浮动元素的特点：

浮动会脱离标准文档流，在标准文档流之上，页面进行了重绘（原来的位置空间不再占有）
同行显示，多个元素浮动排列不下时会进行自动换行
多个元素设置浮动时，第一个浮动元素是找到父元素的边界就停下来。后面的元素会找到前面元素的边界就停下来。
如果行级元素设置浮动后，可以支持宽高并且会脱离文档流（例如span标签浮动后可设置宽高）
块级元素浮动一般通常要设置宽高，否则默认的宽度auto会失效·

什么是标准文档流？

在页面布局过程中，元素默认按照从上到下，从左到右，块级元素独占一行，行级元素共享一行的排列规范。

脱离文档流

元素不再标准文档流的规范，有自己排列方式

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

非浮动元素会占用浮动元素原来的空间
如果非浮动元素里面有文本，那么文本会被浮动元素给挤出来

图片浮动，非浮动元素的文本会围绕着图片进行排列（实现图文混排）
注意：子元素浮动，父元素的高度会塌陷（原因是子元素脱离了文档流而父元素没有设置固定高度导致的）

清除浮动影响

清除浮动的方法：
1. 通过<br clear="all">将浮动元素和非浮动元素分隔开（方法一）
```
<br clear="all">
```
2. 通过空白div添加clear属性将浮动元素和非浮动元素给分隔开（方法二）
  1. 添加一个空的div并且设置清除浮动属性。将浮动区域和标准文档流排列的区域分割
    
    语法：
```
clear : left | right | none; 
```
    - left 清除左浮动对元素造成的影响
    - right 清除右浮动对元素造成的影响
    - both 清除两边浮动对元素造成的影响
```
    <style>
    .clear{
            clear:both;
        }
    </style>
<div class="clear"></div>
```
3. 父元素添加伪元素选择器可以动态添加一个子元素，完成清除浮动的操作（推荐使用）
```
.clearfix::after{
    content:"";
    display:block;
    clear:both;
}
```
4. 取消浮动的影响：给父元素添加overflow:hidden;可以解决子元素浮动父元素高度塌陷的问题
  
  将父元素变成一个BFC容器，容器里面的元素如何排列不会影响到容器外面的元素

扩展知识：多余文字隐藏，用...代替

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

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

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

显示多行文本，多余文字使用...代替（注意：此方法对IE浏览器有兼容问题，不支持）

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

.box h3{
            width: 340px;
            border:1px solid red;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        <div class="box">
        <h3>元素滚动监听插件 元素出现在窗口的时候元素滚动监听插件 元素出现在窗口的时候元素滚动监听插件 元素出现在窗口的时候元素滚动监听插件 元素出现在窗口的时候在执行自定义的函数 在xRoll.js的基</h3>
       </div>