美文网首页
浮动模型

浮动模型

作者: Xara_ | 来源:发表于2019-03-30 16:19 被阅读0次

浮动:float: left / right ;

浮动元素产生了浮动流:
1.所有产生了浮动流的元素,块级元素看不到他们。
2.产生了bfc的元素和文本类属性的元素(inline属性)以及文本都能看到浮动元素。

清除浮动流:clear: left / right / both ;

清除浮动流的方法:
1.在要清除的元素下面写一个p元素,给其添加clear属性清除浮动流,使p元素撑开容器(即撑开父元素)。(一般不建议采用)
2.伪元素:利用伪元素如 E::before 来清除浮动。
注意:在伪元素种要添加 content:" "; 属性才能生效,且clear属性只能应用于块级元素,要先将伪元素利用display属性变为block,再用clear属性清除浮动。

html代码:
<span>123</span>
css代码:
span::before{
              content:"添加内容";//加上content:"";元素才能生效
}
span::after{
             content:"";
             dispaly:block;//将伪元素变为块级元素才能用clear属性清除浮动
             clear:both;
}

凡是设置了position: absolute; float: left / right / both; 属性的元素浏览器会打内部把元素转换成inline-block; 元素的宽高完全由其内容决定和撑起。

文字环绕效果可使用float属性来完成。

相关文章

  • css源码笔记(五)【爱创课堂专业前端培训】

    效果展示图: 复习: 布局模型三种方式:流动模型、浮动模型、层模型 1.浮动float left right no...

  • 浮动模型

    浮动:float: left / right ; 浮动元素产生了浮动流:1.所有产生了浮动流的元素,块级元素看不到...

  • 浮动定位与BFC边距合并

    浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型也是一种可视化格式模型,浮动的...

  • CSS浮动定位和BFC边距合并

    一,浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型是一种可视化格式模型,浮动...

  • 浮动定位BFC边距合并

    浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型也是一种可视化格式模型,浮动的...

  • 浮动定位BFC边距合并

    1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型也是一种可视化模型,浮动的...

  • 任务10

    浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型是一种可视化格式模型,浮动的框...

  • 图片列表

    运用:盒模型、浮动

  • Css核心

    盒模型 浮动 定位

  • 浮动定位BFC边距合并

    1. 浮动元素的特征,对其他浮动元素、普通元素、文字的影响 浮动模型是一种可视化格式模型,浮动元素可以左右移动(根...

网友评论

      本文标题:浮动模型

      本文链接:https://www.haomeiwen.com/subject/woqsbqtx.html