浮动

1.使元素脱离文档流,但其父元素不会脱离文档流;使元素(一般是块级元素)水平排列;外边距不能合并。
2.会为元素生成一个块级框:
(1)浮动元素是块级元素时,
a、其块级特性:占据一行会消失,只占据content大小(在没有设置width);相当于与为块级元素设置了display:inline-block,但其没有inline-block的缺点--元素标签的水平方向的空白文本。
b、其他属性均可以正常设置。
c、其它块级元素不会识别,但块级元素的行内元素(包括文本元素)会识别,这样就造成了这个块级元素的文本会环绕这个浮动元素。
d、外边距不会合并。
(2)浮动元素为行内元素时:
a、其可以设置margin,设置也会生效;其display值由inline转变为block,但其不会占据一行,除了可以设置margin外,其它同行内元素一样。
b、其它属性正常设置。
c、其它行内元素会与识别。
d、外边距不会合并。
3.浮动产生的缺点:
(1)会对下边元素的位置产生影响。
- 解决办法:可以用清除浮动属性来解决对下边元素产生的影响。
(2)父元素的高度难以计算。

4.浮动元素的右边框外方会紧挨着另一个浮动元素的左边框外方,当一行放不下时,会自动跳到下一行,且其top边框外方会紧挨着上一行height最小的浮动元素。
5、当浮动元素为左浮动时,如果其设置的width和height都超过父元素,此浮动不会超过父元素的左边框内方和上边界框内方。
,其父元素的下边框内方和右边框内方会被超出;右浮动同理。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • 主要内容: 浮动的介绍、清除浮动、各种定位、BFC以及外边距合并的介绍。 浮动 什么是浮动元素 浮动元素是floa...
    苦瓜_6阅读 590评论 0 0
  • 1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 任何定义为float的元素,都可以...
    QQQQQCY阅读 273评论 0 0
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 965评论 0 2
  • 一、浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征:1、浮动模型是一种可视化格式...
    青鸣阅读 1,061评论 0 0