css float

css float

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

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

格式

float: right|left|none|inherit

示例:

clear

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

clear: both|left|right|inherit|none

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

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

示例:

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

解决方案

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

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

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

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