css float

╰半橙微兮° 2022-12-24 01:58 198阅读 0赞

# css float #

> 详细请查看个人博客: http://oldjiang.tech/css/13-float.html\#\_13-float

float用来指定元素是放置在其容器的左边还是右边,允许文本或者inline级别元素环绕包围它.

## 格式 ##

float: right|left|none|inherit

示例:

See the Pen [xxExxye][] by Jiangjiansh ( [@jiangjiansh][jiangjiansh]) on [CodePen][].

## clear ##

有些情况下，你需要强制控制元素不环绕在float元素周围，可以使用`clear`属性来接触，该属性格式为:

clear: both|left|right|inherit|none

如果一个容器内都是float元素，将会导致该容器的大小被折叠，可以通过如下的图和示例了解:

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5tlu6aaS-1606373840207)(./img/collapse.png)\]

示例:

See the Pen [poEooqL][] by Jiangjiansh ( [@jiangjiansh][jiangjiansh]) on [CodePen][].

`由于float子元素对于父元素而言相当于不可见，正常的子元素依次按照默认的flow进行排序，假如父元素仅包含float子元素或者最后的行的子元素是float,会导致父元素感知不到子元素的存在，此时如果父元素后面还有其他兄弟元素，则会导致float子元素影响在后续元素渲染，下面是具体的例子参考:`

See the Pen [qBaBEgq][] by Jiangjiansh ( [@jiangjiansh][jiangjiansh]) on [CodePen][].

### 解决方案 ###

#### 方法一: 在容器最后新增一个空白div元素，样式设置为`clear:both` ####

See the Pen [MWjWYJL][] by Jiangjiansh ( [@jiangjiansh][jiangjiansh]) on [CodePen][].

#### 方法二 设置容器`overflow`属性为:`auto` ####

See the Pen [YzGzPVp][] by Jiangjiansh ( [@jiangjiansh][jiangjiansh]) on [CodePen][].

#### 方法三 通过Css`:after`选择符来进行`clear:both`的设置,推荐的做法 ####

.container:after { 
       content: "."; 
       visibility: hidden; 
       display: block; 
       height: 0; 
       clear: both;
    }

See the Pen [NWRWPvz][] by Jiangjiansh ( [@jiangjiansh][jiangjiansh]) on [CodePen][].

[xxExxye]: https://codepen.io/jiangjiansh/pen/xxExxye
[jiangjiansh]: https://codepen.io/jiangjiansh
[CodePen]: https://codepen.io
[poEooqL]: https://codepen.io/jiangjiansh/pen/poEooqL
[qBaBEgq]: https://codepen.io/jiangjiansh/pen/qBaBEgq
[MWjWYJL]: https://codepen.io/jiangjiansh/pen/MWjWYJL
[YzGzPVp]: https://codepen.io/jiangjiansh/pen/YzGzPVp
[NWRWPvz]: https://codepen.io/jiangjiansh/pen/NWRWPvz