float学习笔记

float特性

  • 任何元素都可以使用float属性,行内元素使用float后会变为行内块级元素
  • 普通流中的块级元素“看不到”浮动后的元素,但是这个块级元素的子元素如果为行内元素,则这些行内元素会“看到”这个浮动元素,例如平时实现文字环绕就利用了这一特性(文字是匿名的行内元素)
  • 浮动的框可以向左或者向右移动,直到它的外边缘碰到包含框(其父元素)或者另一个浮动框为止,这条属性也就意味着浮动元素可以像行内元素的样式一样水平排列,但如果高度设置存在问题,那么多个浮动元素水平排列会存在“卡住”的情况

清除浮动

利用clear属性

clear属性的作用是:要求该盒的top border边位于源文档中在此之前的元素形成的所有左(或右)浮动盒的bottom外边下方。

所以一般在需要清除浮动的元素后加上clear属性,更通用的方法是使用伪元素来清除浮动

.clearfix::after {
  content:'';
  display : block;
  clear : both;
}

利用BFC

待续。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 5,914评论 0 6
  • 一、浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征:1、浮动模型是一种可视化格式...
    青鸣阅读 4,937评论 0 0
  • 手刀逃跑:不仅仅是逃生,而是不顾伴侣,自顾自迅速逃跑。 这个话题是奇葩说的一次辩题。最让我映像特别深刻的是一位导师...
    微微的微笑66阅读 7,395评论 0 3
  • I should turn the pages backI could bring it to the skyI ...
    目分目分目分阅读 1,826评论 0 1