In our routine work, often encounter some massive display elements arranged in a row, this time we would normally use flaot, perhaps with inline-block, etc., then what are their similarities and differences? What applies in the scene?
Common:
①inline-block: the display is a block element to inline elements, meaning that, the container to a display element inline, and the contents inside the display block; inline property makes the associated display element, the width of the inline element invalid, adjacent inline elements are displayed in one line does not wrap until the Bank booked so far. block will always be on a separate line element, blocky display width can be set high. So inline-block element is the width and height can be set adjacent elements will be displayed in a row, the Bank booked until, that is, let the container attribute of the element for the block, content inline.
②float: floating element arranged to the left or right float, when the floating element is provided, adjacent elements based on their size, lined line, if the width of the parent container will not wrap. When we set the floating element, the element will flow out of the document, adjacent elements will be installed in surrounding alignment.
Both have in common is the element can be implemented on one line, and can be freely set the element size.
the difference:
①inline-block: horizontal alignment line, even if elements of varying height, will take a maximum height of the element height high line, even if the height of the surrounding small elements left blank, do not return to the second row elements float fill the seats. You can set the default vertical alignment of the baseline.
②float: Let the current document from the flow element, mounted in surrounding arrangement, there is a blank line as met, and the current can squeeze element size, this element will be arranged in the fill up position. The default is aligned at the top.
Scenes:
①inline-block: In the case where we want to set some of the elements in one row and are arranged in the same direction, we try to use inline-block. Because the inline-block elements are still inside the current document flow, thus reducing the program to change the operation of the DOM, DOM because every change, the browser will redraw the DOM tree. Theoretically increase the performance of consumption. So do not have that kind of trouble like flaot, you need to clear flaot.
②float: inline-block even if the layout first choice, but there are some business requirements inline-block can not be involved, for example: There are two elements that we need a left, a right arrangement, this time we can only float to implementation, for the novice, will tangle float is not good tune, too much trouble, think of the desired effect, require multiple adjustments, sometimes we have to set up a floating element, the display order of the elements has changed, sometimes confused changed order before and after the element in HTML and the like. Because the resolution order browser is parsed line by line, when setting the two elements of the right float, the order will first be resolved in the previous element, he is floating right, then in front of the right elements on the first floating accounting position, behind elements in order to be resolved later, only the right order, so order we see is the opposite, when the find out the reason, debugging more convenient.
I encountered was vue data in the data and associated text tied in a row, and the data placed on the right. To the parent container plus text-align: center; then let the text float, can be realized.
Transfer: https://www.cnblogs.com/scot/p/5501669.html . If infringement, delete it immediately.