floatとoverflow
1144 ワード
次のコードがよく見られます.
なぜなら、フローティング要素がドキュメントフローから離れ、親要素の空間を占有しないため、親要素が拡張されていないため、要素が陥没する可能性があるため、overflow:hiddenのBFC属性を利用してフローティングをクリアし、要素を拡張する.
bfcの詳細
参考記事:https://coding.imooc.com/learn/questiondetail/162211.html https://www.imooc.com/article/12448 https://www.cnblogs.com/liuyuweb/p/11284826.html
これはcssの1つの高級知識点BFCの内容に属して、フローティングをクリアするのもbfcの基礎の上で創立して、bfcの核心はbfcをトリガする要素の内部要素が外部要素に影響しないで、外部要素も内部要素に影響しないで、visible以外のいかなるoverflow属性はすべて現在の要素が1つのbfc要素を構成することをトリガして、内部には、1)内部要素のブロックレベル要素のmargin-leftとbfc要素のborder-left整列(一般)、2)内部にfloat属性のある要素は、ドキュメントフローから離れてもbfc要素の幅から飛び出しません.先生コードでoverflowを使うのはこれに基づいています.overflow:hiddenを追加する前に、button-wrapperという属性の要素が引き起こす.button-listの元素の高さは縮んで、つまりあります.button-wrapperの元素の高さ比は.button-wrapperの元素の高さは小さい(簡単に理解する)、ここでは.button-wrapperの下には1つの要素しかないので、高さは直接0になります.では、私たちは持っています.button-listの要素がoverflow:hiddenを設定すると、この要素はbfc要素になり、内部のフローティング要素が幅から飛び出すことができません.bfcは理解しにくい内容ですが、理解すれば多くの奇妙なレイアウトが理解されます.
.list
overflow:hidden
float:left
なぜなら、フローティング要素がドキュメントフローから離れ、親要素の空間を占有しないため、親要素が拡張されていないため、要素が陥没する可能性があるため、overflow:hiddenのBFC属性を利用してフローティングをクリアし、要素を拡張する.
bfcの詳細
参考記事:https://coding.imooc.com/learn/questiondetail/162211.html https://www.imooc.com/article/12448 https://www.cnblogs.com/liuyuweb/p/11284826.html
これはcssの1つの高級知識点BFCの内容に属して、フローティングをクリアするのもbfcの基礎の上で創立して、bfcの核心はbfcをトリガする要素の内部要素が外部要素に影響しないで、外部要素も内部要素に影響しないで、visible以外のいかなるoverflow属性はすべて現在の要素が1つのbfc要素を構成することをトリガして、内部には、1)内部要素のブロックレベル要素のmargin-leftとbfc要素のborder-left整列(一般)、2)内部にfloat属性のある要素は、ドキュメントフローから離れてもbfc要素の幅から飛び出しません.先生コードでoverflowを使うのはこれに基づいています.overflow:hiddenを追加する前に、button-wrapperという属性の要素が引き起こす.button-listの元素の高さは縮んで、つまりあります.button-wrapperの元素の高さ比は.button-wrapperの元素の高さは小さい(簡単に理解する)、ここでは.button-wrapperの下には1つの要素しかないので、高さは直接0になります.では、私たちは持っています.button-listの要素がoverflow:hiddenを設定すると、この要素はbfc要素になり、内部のフローティング要素が幅から飛び出すことができません.bfcは理解しにくい内容ですが、理解すれば多くの奇妙なレイアウトが理解されます.